Post
Ask Question

Toggling Visibility of <HTML> Elements in Blazor

Introduction

One common issue that I have come across multiple times is toggling the visibility of HTML elements based on certain conditions. I found five approaches to achieve this functionality in a Blazor application. I thought I might share them all here with you, to save you some trouble.

Demo

Let me demonstrate different ways to toggle the visibility of buttons based on the state of checkboxes.

Demo of toggle buttons

Demo

Approach 1. @if Condition

In this approach, I am using the @if condition to conditionally render the button based on the state of a checkbox.

@if (IsShow)
{
    <button>Button 1</button>
}

@code
{
     bool IsShow { get; set; }
}

Listing 1. If condition

Approach 2. Inline Style

Another way to toggle visibility is using inline styles directly within the HTML markup. You can apply inline styles to the button element based on the state of a checkbox.

<button style="@(IsShow ? "" : "display:none")">Button 2</button>
@code
{
    bool IsShow { get; set; }
}

Listing 2. Inline style

Approach 3. Internal Style (I know you hate inline styles)

We can directly apply internal styles using the class attribute within the markup.

<button class="@(IsShow ? "" : "hide-button")">Button 3</button>
<style>
    .hide-button{
        display: none;
    }
</style>
@code
{
    bool IsShow { get; set; }
}

Listing 3. Internal style

Approach 4. Dynamic Style

You can dynamically apply styles to the button element by binding it to string property and based on the state of a checkbox it can toggle the styles.

<button style="@ButtonFourStyle">Button 4</button>
@code
{
    bool IsShow { get; set; }
    string ButtonFourStyle => IsShow ? "" : "display:none";
}

Listing 4. Dynamic style

Approach 5. hidden Attribute

Blazor allows us to conditionally set the hidden attribute of HTML elements.

<button hidden="@(!IsShow)">Button 5</button>
@code
{
    bool IsShow { get; set; }
}

Listing 5. Hidden attribute

Here is the full picture

@page "/"
<div class="main-container">
    <div class="row">
        <input type="checkbox" @bind="IsFirstCheckboxChecked" /> Toggle Button 1
        @if (IsFirstCheckboxChecked)
        {
            <button class="button-style">Button 1</button>
        }
    </div>
    <div class="row">
        <input type="checkbox" @bind="IsSecondCheckboxChecked" /> Toggle Button 2
        <button class="button-style" style="@(IsSecondCheckboxChecked ? "" : "display:none")">Button 2</button>
    </div>
    <div class="row">
        <input type="checkbox" @bind="IsThirdCheckboxChecked" /> Toggle Button 3
        <button class="button-style @(IsThirdCheckboxChecked ? "" : "hide-button")">Button 3</button>
    </div>

    <div class="row">
        <input type="checkbox" @bind="IsFourthCheckboxChecked" /> Toggle Button 4
        <button class="button-style" style="@ButtonTwoStyle">Button 4</button>
    </div>

    <div class="row">
        <input type="checkbox" @bind="IsFifthCheckboxChecked" /> Toggle Button 5
        <button class="button-style" hidden="@(!IsFifthCheckboxChecked)">Button 5</button>
    </div>
</div>
<style>
    .main-container {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;        
    }
    .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .button-style {
        border-radius: 8px;
        color: #ffffff;
        background: #7B241C;
        border: none;
    }
    .hide-button{
        display: none;
    }
</style>
@code {
    private bool IsFirstCheckboxChecked { get; set; } = false;
    private bool IsSecondCheckboxChecked { get; set; } = false;
    private bool IsThirdCheckboxChecked { get; set; } = false;
    private bool IsFourthCheckboxChecked { get; set; } = false;
    private bool IsFifthCheckboxChecked { get; set; } = false;
    private string ButtonTwoStyle => IsFourthCheckboxChecked ? "" : "display:none";
}

Listing 6. Overall code

Conclusion

The goal of this article is to be concise and direct. You can use any of these approaches in your web app based on your requirements. I hope this helps.

Rikam


Similar Articles