BlazorUI Demo

Accordion

Progressively disclose related content with native details semantics.

Independent items
Account details

Profile and contact details.

Notifications

Email and application preferences.

View code 
<BuiAccordion>
    <BuiAccordionItem Title="Account details" StartIcon="LucideIcons.User" InitiallyExpanded><BuiText>Profile and contact details.</BuiText></BuiAccordionItem>
    <BuiAccordionItem Title="Notifications" TitleColor="Colors.Primary"><BuiText>Email and application preferences.</BuiText></BuiAccordionItem>
</BuiAccordion>
Single-open group

Give items the same Name to let the browser keep only one open.

First
First panel
Second
Second panel
View code 
<BuiAccordion Name="settings">
    <BuiAccordionItem Title="First">First panel</BuiAccordionItem>
    <BuiAccordionItem Title="Second">Second panel</BuiAccordionItem>
</BuiAccordion>