Blazor - How To Toggle Between Hiding And Showing an Element

How To Toggle Between Hiding And Showing an Element

Toggle between hiding and showing an element with Blazor.

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

    
    <div class="text-center">
        <button class="btn btn-primary" @onclick="@ToggleButton">Toggle</button>
    </div>
    <div class="mt-5" style=' display: @(IsOpen ? "none" : "block");
        background:red;padding:20px;color:#fff;border-radius:5px;text-align:center'>
    Content</div>

    

Step 2) Add C#:

Example

    
    @code {

        private bool IsOpen { get; set; } = false;

        private void ToggleButton()
        {
            IsOpen = !IsOpen;
        }
    }