HxAccordion #
Bootstrap accordion component.
Avoid using a constant value for
ExpandedItemId,
as it resets the accordion to that specific item on each roundtrip.
Instead, utilize InitialExpandedItemId
for setting the initial state.
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 #
Apply the .accordion-flush class to eliminate
the default background-color, certain borders, and rounded corners,
allowing accordions to extend edge-to-edge alongside 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 #
By default, only one accordion item can be expanded at a time.
To allow multiple items to be expanded at the same time,
set the StayOpen parameter to true.
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 #
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, this parameter is ignored, and you must use ExpandedItemIds instead.
When StayOpen is true, the ExpandedItemIdChanged event callback will not be invoked.
Do not use a 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 a constant value as it resets the accordion on every roundtrip. Use InitialExpandedItemIds to set the initial state.
When StayOpen is true, this parameter must be used to manage expanded items, and the ExpandedItemIdsChanged event callback will be invoked for changes. |
| 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 items 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.
The default is false, opening another item collapses the current item.
When true, ExpandedItemIds must be used to manage expanded items. |
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.) |
Event callbacks #
| Name | Type | Description |
|---|---|---|
| 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. |