Accordion
Build vertically collapsing accordions in combination with BCollapse component.
How it works
The BAccordionItem uses the BCollapse component internally to make it collapsible. To render an accordion that’s expanded, add the visible property on the BAccordionItem component.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of bootstrap's accessibility documentation.
Example
Click the accordions below to expand/collapse the accordion content.
HTML
template
<BAccordion>
<BAccordionItem title="Accordion Item #1" visible>
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>.accordion-body</code>, though the
transition does limit overflow.
</BAccordionItem>
</BAccordion>Flush
Add flush property to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
HTML
template
<BAccordion flush>
<BAccordionItem title="Accordion Item #1">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the first item's accordion body.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the second item's accordion body. Let's imagine this
being filled with some actual content.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
Placeholder content for this accordion, which is intended to demonstrate the
<code>flush</code> property. This is the third item's accordion body. Nothing more exciting
happening here in terms of content, but just filling up the space to make it look, at least at
first glance, a bit more representative of how this would look in a real-world application.
</BAccordionItem>
</BAccordion>Always open
Add free property to make accordion items stay open when another item is opened.
HTML
template
<BAccordion free>
<BAccordionItem title="Accordion Item #1">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>default</code> slot, though the
transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #2">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>default</code> slot, though the
transition does limit overflow.
</BAccordionItem>
<BAccordionItem title="Accordion Item #3">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
collapse plugin adds the appropriate classes that we use to style each element. These classes
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
modify any of this with custom CSS or overriding our default variables. It is also worth
noting that just about any HTML can go within the <code>default</code> slot, though the
transition does limit overflow.
</BAccordionItem>
</BAccordion>Component Reference
<BAccordion>| Prop | Type | Default | Description |
|---|---|---|---|
| flush | boolean | false | Remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container |
| free | boolean | false | Accordion items will stay open when another item is opened |
| id | string | undefined | The Id to be injected to accordion items and used in BCollapse for state managment |
| initial-animation | boolean | false | When set, enables the initial animation on mount |
| lazy | boolean | false | When set, the content will not be mounted until opened |
| model-value | boolean | false | Controls the visibility of the component |
| unmount-lazy | boolean | false | When set and `lazy` is true, the content will be unmounted when closed |
| Event | Args | Description |
|---|---|---|
| update:model-value | value: string - Id of the accordion item that is open | Update the currently opened accordion item |
| Name | Scope | Description |
|---|---|---|
| default | Content to place in the Accordion |
<BAccordionItem>Adding styles:
.accordion‑item| Prop | Type | Default | Description |
|---|---|---|---|
| body-attrs | Readonly<AttrsValue> | undefined | Attributes to be applied to the body of the accordion item |
| body-class | ClassValue | undefined | Class to be applied to the body of the accordion item |
| button-attrs | Readonly<AttrsValue> | undefined | Attributes to be applied to the button in header |
| button-class | ClassValue | undefined | Class to be applied to the button in header |
| collapse-class | ClassValue | undefined | Class to be applied to the collapse |
| header-attrs | Readonly<AttrsValue> | undefined | Attributes to be applied to the header element |
| header-class | ClassValue | undefined | Class to be applied to the header element |
| header-tag | string | 'h2' | Tag to be used for the header element |
| horizontal | boolean | undefined | Transition the `width` instead of `height` and set a `width` on the immediate child element |
| id | string | undefined | The Id to be injected to accordion items and used to in BCollapse for state managment |
| is-nav | boolean | undefined | When set, signifies that the accordion is part of a navbar, enabling certain features for navbar support |
| lazy | boolean | false | When set, the content will not be mounted until opened |
| model-value | boolean | false | Controls the visibility of the component |
| show | boolean | false | When set, and prop 'visible' is false on mount, will animate from closed to open on initial mount. Mainly to help with template show. Use model-value for reactive show/hide |
| tag | string | 'div' | Specify the HTML tag to render instead of the default tag |
| title | string | undefined | Text to place in the header of the AccordionItem (title slot takes precedence) |
| unmount-lazy | boolean | false | When set and `lazy` is true, the content will be unmounted when closed |
| visible | boolean | false | When 'true', open without animation |
| wrapper-attrs | Readonly<AttrsValue> | undefined | Attributes to be applied to the wrapper element |
| Event | Args | Description |
|---|---|---|
| hidden | Emitted when AccordionItem has finished closing | |
| hide | value: BvTriggerableEvent - Native triggerable event | Emitted when AccordionItem has started to close |
| hide-prevented | Emitted when the AccordionItem tried to close, but was prevented from doing so. | |
| show | value: BvTriggerableEvent - Native triggerable event | Emitted when AccordionItem has started to show |
| show-prevented | Emitted when the AccordionItem tried to open, but was prevented from doing so. | |
| shown | Emitted when AccordionItem has finished showing | |
| update:model-value | value: boolean - Current visibility state of the AccordionItem | Emitted when the visibility of the AccordionItem is changed |
| Name | Scope | Description |
|---|---|---|
| default | Content to place in the AccordionItem | |
| title | Content to place in the header of the AccordionItem |