How to toggle panel header visibility using a button in the Blazor Dashboard Layout component?

<SfButton OnClick="Toggle">Toggle button</SfButton>

<div class="content">

    <SfDashboardLayout Columns="6" CellSpacing="@(new double[]{10 ,10 })">

        <DashboardLayoutPanels>

            <DashboardLayoutPanel SizeX="4" SizeY="2" CssClass="@DisplayHeader">

                <HeaderTemplate>

                    <div class='header'> Header </div>

                </HeaderTemplate>

                <ContentTemplate>

                    Panel 1

                </ContentTemplate>

            </DashboardLayoutPanel>

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

@code

{

    private string DisplayHeader = "show";

    public void Toggle()

    {

        DisplayHeader = (DisplayHeader == "show") ? "hide" : "show";

    }

}

<style>

    .hide .e-panel-header {

        display: none;

    }

</style>