Accordions are vertically stacked, expandable panels that allow users to show and hide content. They support single or multiple expansion modes, keyboard navigation, lazy content loading, and accessibility features per WAI-ARIA Accordion Pattern.
A simple accordion with multiple items. Click on a header to expand or collapse the panel.
<FodAccordion>
<FodAccordionItem Title="Section 1">
<p>This is the content for section 1.</p>
</FodAccordionItem>
<FodAccordionItem Title="Section 2">
<p>This is the content for section 2.</p>
</FodAccordionItem>
<FodAccordionItem Title="Section 3">
<p>This is the content for section 3.</p>
</FodAccordionItem>
</FodAccordion>Accordions support two modes: Single (only one item expanded at a time) and Multiple (multiple items can be expanded simultaneously).
Expanding one item automatically collapses others.
Multiple items can be expanded simultaneously.
<FodAccordion Mode="AccordionMode.Single">
<FodAccordionItem Title="Panel A">Content A</FodAccordionItem>
<FodAccordionItem Title="Panel B">Content B</FodAccordionItem>
</FodAccordion>
<FodAccordion Mode="AccordionMode.Multiple">
<FodAccordionItem Title="Panel X">Content X</FodAccordionItem>
<FodAccordionItem Title="Panel Y">Content Y</FodAccordionItem>
</FodAccordion>Use DefaultExpanded to specify which items should be expanded on initial render.
<FodAccordion>
<FodAccordionItem Title="Getting Started" DefaultExpanded="true">
<p>This section is expanded by default.</p>
</FodAccordionItem>
<FodAccordionItem Title="Advanced Topics">
<p>Users can expand this when ready.</p>
</FodAccordionItem>
</FodAccordion>Accordion items can be disabled to prevent user interaction.
<FodAccordion>
<FodAccordionItem Title="Available Section">
<p>This section can be expanded.</p>
</FodAccordionItem>
<FodAccordionItem Title="Locked Section (Premium)" Disabled="true">
<p>This content is not accessible.</p>
</FodAccordionItem>
<FodAccordionItem Title="Coming Soon" Disabled="true">
<p>This feature is not yet available.</p>
</FodAccordionItem>
</FodAccordion>Add secondary descriptive text below the title to provide more context about each section.
<FodAccordion>
<FodAccordionItem Title="Personal Information"
SupportingText="Name, email, and contact details">
<p>Enter your personal information here.</p>
</FodAccordionItem>
<FodAccordionItem Title="Shipping Address"
SupportingText="Where should we deliver your order?">
<p>Provide your shipping address.</p>
</FodAccordionItem>
</FodAccordion>Use TitleTemplate to render custom content in the accordion header instead of plain text.
<FodAccordion>
<FodAccordionItem Title="Notifications">
<Icon>
<FodIcon Icon="IconName.Notification"/>
</Icon>
<ChildContent>
<p>You have 3 unread notifications.</p>
</ChildContent>
</FodAccordionItem>
<FodAccordionItem Title="Settings">
<Icon>
<FodIcon Icon="IconName.Settings"/>
</Icon>
<ChildContent>
<p>Manage your settings.</p>
</ChildContent>
</FodAccordionItem>
</FodAccordion>Use LazyContent to defer rendering of heavy content until the item is first expanded. The content is rendered once and preserved.
<FodAccordion>
<FodAccordionItem Title="Immediate Content">
<p>This content renders immediately.</p>
</FodAccordionItem>
<FodAccordionItem Title="Lazy Loaded Content">
<LazyContent>
<p>This only renders when first expanded.</p>
<HeavyComponent />
</LazyContent>
</FodAccordionItem>
</FodAccordion>Accordions support full keyboard navigation following WAI-ARIA patterns for accessibility.
<FodAccordion>
<FodAccordionItem Title="First Item">Content</FodAccordionItem>
<FodAccordionItem Title="Second Item">Content</FodAccordionItem>
<FodAccordionItem Title="Third Item" Disabled="true">Skipped</FodAccordionItem>
<FodAccordionItem Title="Fourth Item">Content</FodAccordionItem>
</FodAccordion>Use two-way binding with bind-Expanded to programmatically control and respond to expansion state changes.
<FodButton OnClick="() => isExpanded = !isExpanded">
Toggle Panel
</FodButton>
<FodAccordion Mode="AccordionMode.Multiple">
<FodAccordionItem Title="Controlled Panel" @bind-Expanded="isExpanded">
<p>Current state: @(isExpanded ? "Expanded" : "Collapsed")</p>
</FodAccordionItem>
</FodAccordion>
@code {
private bool isExpanded = false;
}A real-world example showing an FAQ section with supporting text and structured content.
<FodAccordion>
<FodAccordionItem Title="What is Blazor?"
SupportingText="Learn about the framework">
<p>Blazor is a web framework using C# and HTML.</p>
</FodAccordionItem>
<FodAccordionItem Title="How do I get started?"
SupportingText="Quick start guide">
<ol>
<li>Install .NET SDK</li>
<li>Create project</li>
<li>Start building!</li>
</ol>
</FodAccordionItem>
</FodAccordion>FodAccordion container component properties.
FodAccordionItem component properties.