Jump to main content

Accordion block with Bootstrap 5

2021-08-05 Piranha
Sometimes you have way to much text to fit on a page. A simple way to structure and group important content is by using an accordion. This post will give you an idea on how you can implement your own accordion on a Piranha site

https://getbootstrap.com/docs/5.1/components/accordion/

Since we have an option on our block to have certain items open on page load it makes it easy to show a specific part of our content to our visitors

There is no reason to have all items opened in an accordion on page load, therefore we'll keep this one closed

You can stack as many items as you want

AccordionBlock.cs - Parent/Group block
[BlockGroupType(Name = "Accordion", Category = "Special", Icon = "fas fa-list", IsGeneric = true)]
[BlockItemType(Type = typeof(AccordionItemBlock))]
public class AccordionBlock : BlockGroup
{
}
AccordionItemBlock.cs - Child block
[BlockType(Name = "Accordion section", Category = "Special", Icon = "fas fa-list", IsGeneric = true, IsUnlisted = true)]
public class AccordionItemBlock : Block
{
    [Field(Title = "Title")]
    public StringField Title { get; set; }

    [Field(Title = "Open on page load")]
    public CheckBoxField OpenDefault { get; set; }

    [Field(Title = "Content")]
    public HtmlField Content { get; set; }

    public override string GetTitle()
    {
        return string.IsNullOrWhiteSpace(this.Title.Value) ? "N/A" : this.Title.Value;
    }
}
CustomHtmlHelper.cs - A helper class to generate unique HTML compatible ids
public static class CustomHtmlHelper
{
    public static string UniqueHtmlId()
    {
        Guid guid = Guid.NewGuid();
        return $"unid{guid.ToString().Replace("-", "")}";
    }
}
AccordionBlock.cshtml - The view
@model AccordionBlock
@{
    string accordionId = CustomHtmlHelper.UniqueHtmlId();
}

<div class="accordion" id="@accordionId">
    @foreach (AccordionItemBlock item in Model.Items.Cast<AccordionItemBlock>())
    {
        string itemId = CustomHtmlHelper.UniqueHtmlId();

        <div class="accordion-item">
            <h2 class="accordion-header" id="heading-@itemId">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-@itemId" aria-expanded="true" aria-controls="collapse-@itemId">
                    @item.Title
                </button>
            </h2>
            <div id="collapse-@itemId" class="accordion-collapse collapse @(item.OpenDefault.Value ? "show" : "")" aria-labelledby="heading-@itemId" data-bs-parent="#@accordionId">
                <div class="accordion-body">
                    @Html.Raw(item.Content.Value)
                </div>
            </div>
        </div>
    }
</div>
Dont forget to register the blocks in Startup.cs in our Configure() method
App.Blocks.Register<AccordionBlock>();
App.Blocks.Register<AccordionItemBlock>();
How about another great post? Previous Next

You might also want to read the following

2021-08-12 Piranha

Edit block templates inside the manager with Scriban

Want to edit block templates without rebuilding your project? Let Scriban help you with that. Scriban parses your custom Html and objects and then gives you HTML ready to be used anywhere.

2021-08-11 Piranha

Track users with Google Analytics on your Piranha site

Keep a track on your visitors and which pages are popular with Google Analytics. This post gives you a great example on how you can implement a dynamic way to add end edit your tracking codes

2021-08-10 Piranha

Manage your footer with a region

Footers are a basic component of almost all websites. Therefor we'll make it as easy as possible for us to manage ours by turning it into a region area on our site model. This guide uses Bootstrap 5

2021-08-08 Piranha

Carousel block for Piranha with Bootstrap

A good image slider or carousel can complete your website. This post will give you a quick example on how you can add your own carousel to your Piranha site

2021-08-07 Piranha

Youtube block for Piranha

Want to show Youtube videos on your Piranha site? This post will give you a quick example on how you could implement a Youtube block on your site, either for showing useful videos or Rick-Rolling your visitors