# Accordion
**Also known as:** Expander
## Description
The Accordion shows and hides a section of related content behind a header the reader can open and close. It carries a title, an optional description and icons, animates the panel open to whatever height its content needs, and can be driven by binding, by events or by its own Expand, Collapse and Toggle methods - which a callback of its own can refuse before the panel moves. The header is a button inside a heading, wired to the panel the way the WAI-ARIA accordion pattern asks for.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Actions | `RenderFragment?` | null | The content rendered beside the header, outside of the toggle button and of the heading it sits in, so that it can hold its own interactive elements (a menu, a delete button, a switch). |
| Background | `BitColorKind?` | null | The color kind of the background of the accordion. |
| Border | `BitColorKind?` | null | The color kind of the border of the accordion. |
| Body | `RenderFragment?` | null | Alias for the ChildContent parameter. |
| Classes | `BitAccordionClassStyles?` | null | Custom CSS classes for different parts of the accordion. |
| ChildContent | `RenderFragment?` | null | The content of the accordion. |
| DefaultIsExpanded | `bool?` | null | Default value for the IsExpanded parameter. |
| Description | `string?` | null | A short description in the header of the accordion. |
| ExpandedExpanderIcon | `BitIconInfo?` | null | Gets or sets the icon to show in place of the expander icon while the accordion is expanded, using custom CSS classes for external icon libraries. Takes precedence over ExpandedExpanderIconName when both are set. Setting either of them also turns the rotation of the expander icon off. |
| ExpandedExpanderIconName | `string?` | null | Gets or sets the name of the icon, from the built-in Fluent UI icons, to show in place of the expander icon while the accordion is expanded. Setting it also turns the rotation of the expander icon off. |
| ExpanderIcon | `BitIconInfo?` | null | Gets or sets the icon to display as expander using custom CSS classes for external icon libraries. Takes precedence over ExpanderIconName when both are set. Defaults to the ChevronRight icon if neither property is set. |
| ExpanderIconName | `string?` | null | Gets or sets the name of the icon to display as expander from the built-in Fluent UI icons. Defaults to ChevronRight if not set. |
| ExpanderIconPosition | `BitIconPosition?` | null | Gets or sets the side of the header the expander icon sits on. The default value is End. |
| ExpanderTemplate | `RenderFragment<bool>?` | null | The custom content to render in place of the expander icon, leaving the rest of the header as it is and receiving the current expanded state. It sits inside the wrapper the rotation is applied to, so it still turns over unless NoExpanderRotation keeps it still, and HideExpanderIcon still removes it. HeaderTemplate replaces it along with the rest of the header. |
| ExpandOnPrint | `bool` | false | Opens the panel of the accordion while the page is being printed, so that a collapsed section is not left out of the paper as a bare header. The scroll cap of MaxHeight is lifted along with it. Content that is not in the DOM at all - a LazyContent panel that has never been opened, a collapsed UnmountOnCollapse panel - is still printed as a bare header. |
| HeaderAriaLabel | `string?` | null | Gets or sets the accessible label of the toggle button in the header, for a header whose own content does not name it - an icon-only HeaderTemplate, most of all. |
| HeaderTemplate | `RenderFragment<bool>?` | null | Used to customize the header of the accordion. It replaces the whole default header, the expander icon included, and receives the current expanded state. |
| HeadingLevel | `int?` | null | Gets or sets the heading level (aria-level) reported for the header of the accordion, so that it takes its right place in the heading outline of the page. The default value is 3 - or one level below the accordion this one is nested in - and the value is clamped to the 1..6 range. |
| HideExpanderIcon | `bool` | false | Removes the expander icon from the header of the accordion. |
| Icon | `BitIconInfo?` | null | Gets or sets the icon to display at the start of the header using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | `string?` | null | Gets or sets the name of the icon to display at the start of the header from the built-in Fluent UI icons. |
| IsExpanded | `bool` | false | Determines whether the accordion is expanded or collapsed. (two-way bound) |
| LazyContent | `bool` | false | Delays the first render of the content of the accordion until it is expanded for the first time. The content stays in the DOM afterwards, so the state it holds survives a collapse. |
| MaxHeight | `string?` | null | Gets or sets the maximum height of the content of the accordion (any CSS length), beyond which the content scrolls inside the accordion instead of growing it. The scrolling region is focusable, so that it can be scrolled by the keyboard as well. |
| NoBorder | `bool` | false | Removes the default border of the accordion and gives a background color to the body. |
| NoContentRegion | `bool` | false | Removes the region role from the panel of the accordion, leaving it a plain container. The role names the panel as a landmark, which helps a screen reader user find their way back to the content of a panel that holds headings or another accordion; the WAI-ARIA authoring practices ask for it to be dropped where it would flood the page with landmarks instead - more than about six panels that can all be open at the same time. |
| NoExpanderRotation | `bool` | false | Keeps the expander icon still instead of turning it over when the accordion is expanded. |
| OnClick | `EventCallback<MouseEventArgs>` | | Callback that is called when the header is clicked. |
| OnChange | `EventCallback<bool>` | | Callback that is called when the IsExpanded value has changed. |
| OnCollapse | `EventCallback` | | Callback that is called when the accordion is collapsed. |
| OnExpand | `EventCallback` | | Callback that is called when the accordion is expanded. |
| OnToggling | `EventCallback<BitAccordionToggleArgs>` | | Callback invoked before the accordion expands or collapses, letting the change be cancelled. Since the callback is awaited, it can also run asynchronous work like loading the content of the panel or asking for a confirmation first, and nothing else toggles the accordion while it is running. A change that comes from the IsExpanded parameter itself is not offered here. |
| ReadOnly | `bool` | false | Leaves the accordion where it is: the header keeps its colors and its place in the tab order, and reports itself as aria-disabled, but it no longer answers the pointer or the keyboard. OnClick still reports the click, and the Expand, Collapse and Toggle methods still drive the accordion. |
| Size | `BitSize?` | null | Gets or sets the size of the accordion, which drives the padding of the header and of the panel and the type scale of the whole component. The default value is Medium. |
| Styles | `BitAccordionClassStyles?` | null | Custom CSS styles for different parts of the accordion. |
| Title | `string?` | null | Title in the header of Accordion. |
| TitleTemplate | `RenderFragment?` | null | The custom content to render in place of the Title, leaving the rest of the header - the icon, the description and the expander - as it is. Unlike HeaderTemplate, which replaces the whole header, this only takes the place of the title text. |
| TransitionDuration | `int?` | null | Gets or sets the duration of the expand/collapse transition in milliseconds, overriding the duration the theme provides. A reduced-motion preference still collapses it, unless the ForceAnimation parameter opts out of that. |
| UnmountOnCollapse | `bool` | false | Removes the content of the accordion from the DOM while it is collapsed, so that nothing it holds keeps running behind a closed header. The collapse of an accordion that unmounts its content is not animated, since there is nothing left to animate. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Expand | `Task` | | Expands the accordion. Does nothing if it is already expanded, and reports the change through the IsExpanded binding, OnChange and OnExpand. |
| Collapse | `Task` | | Collapses the accordion. Does nothing if it is already collapsed, and reports the change through the IsExpanded binding, OnChange and OnCollapse. |
| Toggle | `Task` | | Expands the accordion if it is collapsed and collapses it if it is expanded, reporting the change through the IsExpanded binding, OnChange and OnExpand/OnCollapse. |
| FocusAsync | `ValueTask` | | Gives the focus to the header of the accordion, so that a panel the app has just opened is also where the keyboard is standing. The overload taking a bool prevents the header from being scrolled into view. |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitColorKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
### BitIconPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Start | 0 | Icon renders before the content. |
| End | 1 | Icon renders after the content (default). |
### BitAccordionToggleReason Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Click | 0 | The header of the accordion was clicked, or activated by the Enter or the Space key. |
| Method | 1 | The Expand, Collapse or Toggle method of the accordion was called. |
### BitSize Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitAccordionToggleArgs Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| IsExpanding | `bool` | | The state the accordion is about to move to: true while it is expanding, false while it is collapsing. |
| Reason | `BitAccordionToggleReason` | | What made the accordion expand or collapse: a click on its header, or a call to one of its Expand, Collapse and Toggle methods. |
| Cancel | `bool` | false | Set to true to cancel the expansion or the collapse and leave the accordion as it is. |
### BitAccordionClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAccordion. |
| Expanded | `string?` | null | Custom CSS classes/styles for the expanded state of the BitAccordion. |
| HeaderWrapper | `string?` | null | Custom CSS classes/styles for the header wrapper of the BitAccordion, which holds the heading and the actions. |
| Heading | `string?` | null | Custom CSS classes/styles for the heading element of the BitAccordion that wraps the header button. |
| Header | `string?` | null | Custom CSS classes/styles for the header of the BitAccordion. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon at the start of the header of the BitAccordion. |
| HeaderContent | `string?` | null | Custom CSS classes/styles for the header content of the BitAccordion. |
| Title | `string?` | null | Custom CSS classes/styles for the title of the BitAccordion. |
| Description | `string?` | null | Custom CSS classes/styles for the description of the BitAccordion. |
| ExpanderIconWrapper | `string?` | null | Custom CSS classes/styles for the expander icon wrapper of the BitAccordion. |
| ExpanderIcon | `string?` | null | Custom CSS classes/styles for the expander icon of the BitAccordion. |
| ExpandedIcon | `string?` | null | Custom CSS classes/styles for the icon of the BitAccordion in expanded state. |
| Actions | `string?` | null | Custom CSS classes/styles for the actions of the BitAccordion, rendered beside the header. |
| ContentContainer | `string?` | null | Custom CSS classes/styles for the content container of the BitAccordion. |
| ContentWrapper | `string?` | null | Custom CSS classes/styles for the content wrapper of the BitAccordion, which clips the content while it collapses. |
| Content | `string?` | null | Custom CSS classes/styles for the content of the BitAccordion. |
## Examples
\n**Basic**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**Multiple**:
```razor
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
when possibilities are limitless, waiting for content to emerge.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come.
```
\n**Description**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
```
\n**Icon**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**Expander icon**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**Actions**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
```csharp
private int renameCount;
```
\n**Controlled**:
```razor
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
Each word carried meaning, each pause brought understanding.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
to awaken. These words are temporary, standing in place of ideas yet to come.
```
```csharp
private int controlledAccordionExpandedItem = 1;
```
\n**Binding**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
```
```csharp
private bool accordionToggleIsEnabled = true;
private bool accordionToggleIsExpanded;
```
\n**Events**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
The collapse of this panel is refused while it is locked, the way a panel holding a form that has not
been filled in yet would refuse to close on the reader.
Expand
Collapse
Toggle
Expand & focus
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
```csharp
private BitAccordion accordionRef = default!;
```
\n**Content rendering**:
```razor
```
\n**MaxHeight**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
```
\n**Transition**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**Templates**:
```razor
Advanced settings
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
@(isExpanded ? "Less" : "More")
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
```
\n**Accessibility**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
A link the Tab key only reaches while this panel is open.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
The accordion below is announced one level under this one, and neither of the two panels is a landmark.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**NoBorder**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
```
\n**Printing**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
These placeholder words symbolize the beginning-a moment of possibility where creativity has yet to take shape.
```
\n**Read-only**:
```razor
This panel answers no click and no key, but it is not greyed out: it is open on purpose and nothing
about it is unavailable.
This one is greyed out and its header is out of the tab order.
```
```csharp
private int readOnlyClickCount;
```
\n**Color**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
```csharp
private BitColorKind backgroundColorKind = BitColorKind.Primary;
private BitColorKind borderColorKind = BitColorKind.Primary;
```
\n**External Icons**:
```razor
ExpanderIcon=@("fa-solid fa-chevron-down")
ExpanderIcon="@BitIconInfo.Css("fa-solid fa-chevron-right")"
ExpanderIcon="@BitIconInfo.Fa("solid angle-down")"
Icon="@BitIconInfo.Fa("solid gear")"
ExpanderIcon=@("bi bi-chevron-down")
ExpanderIcon="@BitIconInfo.Css("bi bi-chevron-right")"
ExpanderIcon="@BitIconInfo.Bi("arrow-down")"
Icon="@BitIconInfo.Bi("gear")"
```
\n**Size**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**Style & Class**:
```razor
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
```
\n**RTL**:
```razor
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
```
Clicks: @clickCount
Last OnChange: @lastChange
Expanded: @expandCount times, collapsed: @collapseCount times
```
```csharp
private int clickCount;
private bool lastChange;
private int expandCount;
private int collapseCount;
```
\n**Cancelling a toggle**:
```razor
Refused: @refusedCount times
```
```csharp
private bool lockAccordion;
private int refusedCount;
private void HandleOnToggling(BitAccordionToggleArgs args)
{
if (args.IsExpanding || lockAccordion is false) return;
args.Cancel = true;
refusedCount++;
}
```
\n**Programmatic control**:
```razor
Accordion 1
I am an accordion