Components

Accordion

Build vertically collapsing accordions in combination with Bootstrap’s Collapse JavaScript plugin.

How it works#

The accordion uses collapse internally to make it collapsible. felt-css also supports a variant built on <details> that needs no JavaScript; see Without JavaScript.

The animation effect of this component is dependent on the prefers-reduced-motion media query.

Example#

Click the accordions below to expand/collapse the accordion content.

To render an accordion that’s expanded by default:

add the .show class on the .collapse element.
drop the .collapsed class from the .accordion-button element and set its aria-expanded attribute to true.

Bootstrap’s markup also puts an .accordion-collapse class on each collapsing element. felt-css doesn’t need it, but markup copied from Bootstrap works unchanged.

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

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

In the felt look the accordion is one sewn sheet of felt with a row of stitches between the items; the open item’s header is tinted a shade darker.

Flush#

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their 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.

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item’s accordion body.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        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.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        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.
      </div>
    </div>
  </div>
</div>

Always open#

Omit the data-bs-parent attribute on each .collapse to make accordion items stay open when another item is opened.

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="collapse show">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="collapse">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="collapse">
      <div class="accordion-body">
        <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. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Without JavaScript#

A felt-css extra: build the accordion from <details class="accordion-item"> elements with a <summary class="accordion-button">. The browser opens and closes them by itself, so no JavaScript is needed. Add the open attribute to show an item by default.

Accordion Item #1

This is the first item’s accordion body. It is open by default because of the open attribute on its <details>.

Accordion Item #2

This is the second item’s accordion body. Click its summary and the browser opens it, no script involved.

Accordion Item #3

This is the third item’s accordion body. Several items can be open at the same time, like with “Always open”.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-button">Accordion Item #1</summary>
    <div class="accordion-body">
      <strong>This is the first item’s accordion body.</strong> It is open by default because of the <code>open</code> attribute on its <code>&lt;details&gt;</code>.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-button">Accordion Item #2</summary>
    <div class="accordion-body">
      <strong>This is the second item’s accordion body.</strong> Click its summary and the browser opens it, no script involved.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-button">Accordion Item #3</summary>
    <div class="accordion-body">
      <strong>This is the third item’s accordion body.</strong> Several items can be open at the same time, like with “Always open”.
    </div>
  </details>
</div>

To let only one item be open at a time, give all <details> the same name attribute (supported by current browsers). The <details> variant opens without an animation and works with .accordion-flush, too.

Accordion Item #1

Only one of these items is open at a time.

Accordion Item #2

Opening this item closes the first one.

Accordion Item #3

And opening this one closes the second.

<div class="accordion">
  <details class="accordion-item" name="faq" open>
    <summary class="accordion-button">Accordion Item #1</summary>
    <div class="accordion-body">Only one of these items is open at a time.</div>
  </details>
  <details class="accordion-item" name="faq">
    <summary class="accordion-button">Accordion Item #2</summary>
    <div class="accordion-body">Opening this item closes the first one.</div>
  </details>
  <details class="accordion-item" name="faq">
    <summary class="accordion-button">Accordion Item #3</summary>
    <div class="accordion-body">And opening this one closes the second.</div>
  </details>
</div>

Accessibility#

Please read the collapse accessibility section for more information. The <details> variant gets its keyboard support and state announcements from the browser.

Usage#

The collapse plugin utilizes a few classes to handle the heavy lifting:

.collapse hides the content
.collapse.show shows the content
.collapsing is added when the transition starts, and removed when it finishes

Via data attributes#

Just add data-bs-toggle="collapse" and a data-bs-target to the element to automatically assign control of one or more collapsible elements. The data-bs-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show.

To add accordion group management to a collapsible area, add the data attribute data-bs-parent="#selector".

Via JavaScript#

Enable manually with:

const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

JavaScript behavior#

felt-css is CSS only; opening and closing comes from Bootstrap’s collapse plugin. Options (parent, toggle), methods (show, hide, toggle, dispose, getOrCreateInstance) and events (show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse) work exactly as described in Bootstrap’s accordion documentation.