# Accordion **Also known as:** Expander ## Description The Accordion component allows the user to show and hide sections of related content on a page. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | 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. | | 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. | | HeaderTemplate | `RenderFragment<bool>?` | null | Used to customize the header of the accordion. | | IsExpanded | `bool` | false | Determines whether the accordion is expanded or collapsed. | | NoBorder | `bool` | false | Removes the default border of the accordion and gives a background color to the body. | | 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. | | Styles | `BitAccordionClassStyles?` | null | Custom CSS styles for different parts of the accordion. | | Title | `string?` | null | Title in the header of Accordion. | | 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 | | :--- | :--- | :------------ | :---------- | | 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. | ### 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 ### 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. | | Header | `string?` | null | Custom CSS classes/styles for 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. | | ContentContainer | `string?` | null | Custom CSS classes/styles for the content container of the BitAccordion. | | 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. ``` \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. 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**Background**: ```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.
``` ```csharp private BitColorKind backgroundColorKind = BitColorKind.Primary; ``` \n**Border**: ```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. ``` ```csharp private BitColorKind borderColorKind = BitColorKind.Primary; ``` \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. The spaces here are open for growth, for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way. 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. 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, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
``` \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. 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**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. Placeholder text reminds us of that moment when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way. 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. 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, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
``` ```csharp private byte 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. 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. ``` ```csharp private bool AccordionToggleIsEnabled; private bool AccordionToggleIsExpanded; ``` \n**Customization**: ```razor
Accordion 1 I am an accordion
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**ExpanderIcon**: ```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**External icons**: ```razor ExpanderIcon=@@("fa-solid fa-chevron-down") ExpanderIcon="@@BitIconInfo.Css("fa-solid fa-chevron-right")" ExpanderIcon="@@BitIconInfo.Fa("solid angle-down")" ExpanderIcon="@@BitIconInfo.Fa("solid caret-down")" ExpanderIcon=@@("bi bi-chevron-down") ExpanderIcon="@@BitIconInfo.Css("bi bi-chevron-right")" ExpanderIcon="@@BitIconInfo.Bi("arrow-down")" ExpanderIcon="@@BitIconInfo.Bi("caret-down-fill")" ``` \n**RTL**: ```razor لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. ```