Blazor How To: Folding Content


How to show and hide Blazor content. Its simple!

When creating UIs using XAML, to show and hide content you typically manipulate the Visbility property of a div tag or other Html element. In Blazor it is far simpler. You just wrap teh content in a Blazor if sequence.

@if (Viz) 
{ 
<h1>The Heading for Visible</h1>
}
else 
{
<h1>The Heading for Viz false</h1>
}
<button class="btn btn-primary" @onclick="@Toggle">Toggle Viz</button>

@code{
    bool Viz {get;set;} = true;

    protected void Toggle(MouseEventArgs e)
    {
        Viz = ! Viz;
        StateHasChanged();
    }
}

That is all it takes!

It is worth noting that the Html code in the “hidden” part is not actually hidden! If you look at the source, when in a browser, you will find that the “hidden” part only comes into existence in the DOM when it is toggled to show

 TopicSubtopic
   
 This Category Links 
Category:Blazor Index:Blazor
  Next: > Blazor How To
<  Prev:   Blazor