Accordion block with Bootstrap 5
2021-08-05 PiranhaSometimes 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
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>();