HxAccordion #

Bootstrap accordion component.

Basic usage #

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Flush #

Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Stay open #

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Suspendisse eu ipsum orci. Donec sit amet fringilla ante, at facilisis metus. Fusce leo elit, cursus sed rutrum vel, elementum eu justo.

Complex demo #

Lazy loaded content...

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Donec vel pharetra mi, ut ullamcorper nisl. Morbi efficitur metus eu mauris finibus suscipit ac vel nibh. Vivamus lacinia magna ut risus auctor ultrices.Aenean maximus lacus in tellus dictum posuere.Nulla facilisi. Sed vitae facilisis justo.

expandedId: 2

API #

Parameters #

Name Type Description
ChildContent RenderFragment Content of the component.
CssClass string Additional CSS classes for the accordion container.
ExpandedItemId string ID of the single expanded item (if StayOpen is true, use ExpandedItemIds, several items can be expanded). Do not use constant value as it reverts the accordion to that item on every roundtrip. Use InitialExpandedItemId to set the initial state.
ExpandedItemIdChanged EventCallback<string>
ExpandedItemIds List<string> IDs of the expanded items (if StayOpen is true, several items can be expanded). Do not use constant value as it resets the accordion on every roundtrip. Use InitialExpandedItemIds to set the initial state.
ExpandedItemIdsChanged EventCallback<List<string>>
InitialExpandedItemId string ID of the item you want to expand at the very beginning (overwrites ExpandedItemId if set).
InitialExpandedItemIds List<string> IDs of the item you want to expand at the very beginning (overwrites ExpandedItemIds if set).
StayOpen bool Set to true to make accordion items stay open when another item is opened. Default is false, opening another item collapses current item.

HxAccordionItem #

Single item for HxAccordion.

API #

Parameters #

Name Type Description
BodyCssClass string Additional CSS class(es) for the accordion item body (.accordion-body).
BodyTemplate RenderFragment Body (collapsible).
CssClass string Additional CSS class(es) for the accordion item.
HeaderCssClass string Additional CSS class(es) for the accordion item header (.accordion-header).
HeaderTemplate RenderFragment Clickable header (always visible).
Id string ID of the item (HxAccordion.ExpandedItemId). (Gets generated GUID if not set.)
OnCollapsed EventCallback<string> Raised after the transition from this item (the animation is finished). Is not raised for the initial rendering even if the item is collapsed (no transition happened).
OnExpanded EventCallback<string> Raised after the transition to this item (the animation is finished). Is not raised for the initial rendering even if the item is not collapsed (no transition happened).

Methods #

Method Returns Description
CollapseAsync() Task Collapses the item.
ExpandAsync() Task Expands the item.
An unhandled error has occurred. Reload 🗙