Accordion

Build vertically collapsing accordions using the BCL TagHelpers.

How it works

Accordions are built from one root <bs-accordion> and one or more <bs-accordion-item> entries. Each item captures a <bs-accordion-header> and renders a Bootstrap collapse panel for the remaining body content.

By default, opening one item closes the others in the same accordion. Set always-open="true" when multiple items should stay open at the same time.

The collapse animation follows Bootstrap's reduced-motion behavior, so users who request reduced motion receive the matching transition behavior from Bootstrap.

Example

Click the accordion headers below to expand and collapse each item's body content.

This is the first item’s accordion body. 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’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
aspnet 

<bs-accordion>
    <bs-accordion-item is-open="true">
        <bs-accordion-header>Accordion Item #1</bs-accordion-header>
        <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’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #2</bs-accordion-header>
        <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.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #3</bs-accordion-header>
        <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.
    </bs-accordion-item>
</bs-accordion>

Flush

Set flush="true" on <bs-accordion> to remove the outer borders and rounded corners so the accordion renders edge-to-edge with its parent container.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item’s accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. 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.
aspnet 

<bs-accordion flush="true">
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #1</bs-accordion-header>
        Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #2</bs-accordion-header>
        Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item’s accordion body. Let’s imagine this being filled with some actual content.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #3</bs-accordion-header>
        Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. 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.
    </bs-accordion-item>
</bs-accordion>

Always open

Set always-open="true" on <bs-accordion> when accordion items should remain open after another item is expanded.

This is the first item’s accordion body. 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’s also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.

This is the third item’s accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
aspnet 

<bs-accordion always-open="true">
    <bs-accordion-item is-open="true">
        <bs-accordion-header>Accordion Item #1</bs-accordion-header>
        <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’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #2</bs-accordion-header>
        <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.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Accordion Item #3</bs-accordion-header>
        <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.
    </bs-accordion-item>
</bs-accordion>

Accessibility

Accordion accessibility follows Bootstrap's collapse accessibility behavior. Keep header text concise, descriptive, and useful when announced as a button controlling the generated panel.

Each header renders as a button that controls its associated panel. Keep header text short and descriptive.
aspnet 

<bs-accordion>
    <bs-accordion-item is-open="true">
        <bs-accordion-header>Accessible accordion heading</bs-accordion-header>
        Each header renders as a button that controls its associated panel. Keep header text short and descriptive.
    </bs-accordion-item>
</bs-accordion>

Events

Item one body content.

Item two body content.
aspnet 

<bs-accordion
              on-show="console.log('Accordion show', event)"
              on-shown="console.log('Accordion shown', event)"
              on-hide="console.log('Accordion hide', event)"
              on-hidden="console.log('Accordion hidden', event)">
    <bs-accordion-item is-open="true">
        <bs-accordion-header>Item #1</bs-accordion-header>
        Item one body content.
    </bs-accordion-item>
    <bs-accordion-item>
        <bs-accordion-header>Item #2</bs-accordion-header>
        Item two body content.
    </bs-accordion-item>
</bs-accordion>
These map to show.bs.collapse, shown.bs.collapse, hide.bs.collapse, and hidden.bs.collapse.

CSS

Variables

Accordions use Bootstrap's local CSS variables for color, spacing, borders, radius, and button icon styling.

Sass variables

Sass variables remain stylesheet concerns; use <bs-accordion> attributes for helper-supported behavior and classes for documented Bootstrap variants.

Usage

The tag helpers emit the Bootstrap collapse hooks that handle the show and hide behavior for each accordion item.

Use is-open for the initial expanded state and always-open to omit the parent-collapse relationship.

Use Bootstrap's collapse instance APIs on the generated panel elements when imperative behavior is required.

Via data attributes

<bs-accordion> and <bs-accordion-item> generate the Bootstrap collapse data attributes needed for click-driven accordion behavior.

Via JavaScript

Use bootstrap.Collapse against the generated accordion collapse elements when an imperative method call is the clearest fit for the workflow.

Options

The helper-supported options are is-open on each item and always-open on the accordion container. Other Bootstrap collapse options remain JavaScript configuration concerns and can be passed through Bootstrap's normal data attribute or JavaScript configuration patterns when needed.

Methods

Bootstrap collapse instance methods such as show, hide, toggle, dispose, getInstance, and getOrCreateInstance are asynchronous transition APIs. They operate on the generated panel elements and return after the transition starts, not after it completes.