Create an accordion component with Blazor

In this post, I’m going to explain how to create an accordion component with Blazor WebAssembly in a very simple way. My goal is to create a component to display a list of element in the page.

When the user clicks on one of the element, it opens and shows its content.

Implementation

So, first things first. I’m using Open Iconic to display the icon in the accordion. For that, I have to add it in the project. For that, you can download it from the website or add a Client-side library. After that, add the CSS to your index.html.

Collapsable component

First, under the Shared folder add a new Razor component and its name is Collapsable.razor. So, copy the following code and paste it in your Razor file.

<div class="collapsable">
    <div class="title" @onclick="@Toggle">
        @if (Collapsed)
        {
            <span class="oi oi-chevron-right mr-1"></span>
        }
        else
        {
            <span class="oi oi-chevron-bottom mr-1"></span>
        }
        @Title
    </div>
    @if (!string.IsNullOrEmpty(Value))
    {
    <div class="value">
        <h4><span class="badge badge-success">@Value</span></h4>
    </div>
    }
</div>

@if (!Collapsed)
{
    <div class="collapsable-panel">
        @ChildContent
    </div>
}

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public bool Collapsed { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public string Value { get; set; }

    void Toggle()
    {
        Collapsed = !Collapsed;
    }
}

Code explanation

How you can see, the code is pretty easy. The variable Collapsed gives to the page the input to display or not the main content in the collapsable-panel. In the first div in line 2, when the user clicks on it, the function Toggle is called and changes the value of the Collapsed variable.

Obviously, the Title and the content of this accordion is always different and I want to add whatever I want. For this reason, I add a Title variable to use as parameter. Also, RenderFragment ChildContent allows us to add in the tag Collapsable any code.

Add the CSS

Now, next step to create an accordion component with Blazor is to add a bit of style for the component. We have 2 ways to do that:

• add the CSS in the global CSS
• create a specific CSS for this component. For that, just add a new CSS file with name Collapsable.razor.css

Either way, copy the following CSS and add it to yours.

.collapsable-panel {
    border: 1px solid #eee;
    padding: 25px;
    background-color: white;
    overflow: hidden;
}

.collapsable .title {
    display: table-cell
}

.collapsable .value {
    display: table-cell;
    text-align: right;
}

Using the component

Finally, I want to use this Razor component. In a Razor Page, add the following code

<Collapsable Title="Test" Collapsed="true" Value="">
    This is my content
</Collapsable>

Now, if you run your project, you can see the collapsed bar with the title Test. If you click on it, you can see the content.

Bonus

So, you see in the component a Value property. You can remove it. The reason for that is that I want to display a percentage (or any other text) on the right of the accordion like in the following image.

Conclusion

I hope this post “Create an accordion component with Blazor” it will be useful. Please leave your comment at the end of this post or in our forum.

More documentation and examples

For more documentation and examples about Blazor and other components, visit my blog PureSourceCode. Here a quick list of popular links:

• Write a reusable Blazor component
• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor’s Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Modal Dialog component for Blazor
• Create Tooltip component for Blazor
• Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs