Accordion

The accordion uses native HTML <details> and <summary> elements, leveraging the name attribute to create exclusive accordions where only one item can be open at a time. This approach requires no JavaScript for core functionality and is fully accessible by default.

Example

Click the accordions below to expand/collapse the accordion content. Each <details> element shares the same name attribute value, creating an exclusive accordion where opening one item automatically closes the others.

To render an accordion that's expanded by default, add the open attribute to the <details> element.

Accordion Item #1

This is the first item's accordion body. It is shown by default because the open attribute is present. The native <details> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the .accordion-body.

Accordion Item #2

This is the second item's accordion body. The name attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.

Accordion Item #3

This is the third item's accordion body. This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching name attributes on your <details> elements.

HTML

<div class="accordion">
  <details class="accordion-item" name="accordionExample">
    <summary class="accordion-header">
      Accordion Item #1
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code>&lt;details&gt;</code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
    </div>
  </details>
  <details class="accordion-item" name="accordionExample">
    <summary class="accordion-header">
      Accordion Item #2
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
    </div>
  </details>
  <details class="accordion-item" name="accordionExample">
    <summary class="accordion-header">
      Accordion Item #3
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code>&lt;details&gt;</code> elements.
    </div>
  </details>
</div>

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Variants

Use the contextual .theme-{color} classes to apply a semantic theme color to open accordion items.

Accordion Item #1

Accordion Item #2

This is the second item's accordion body. The name attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.

Accordion Item #3

HTML

<div class="accordion theme-primary">
  <details class="accordion-item" name="accordionExampleTheme" open>
    <summary class="accordion-header">
      Accordion Item #1
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the first item's accordion body.</strong> It is shown by default because the <code>open</code> attribute is present. The native <code>&lt;details&gt;</code> element handles all the show/hide logic without any JavaScript. You can put any HTML content within the <code>.accordion-body</code>.
    </div>
  </details>
  <details class="accordion-item" name="accordionExampleTheme">
    <summary class="accordion-header">
      Accordion Item #2
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the second item's accordion body.</strong> The <code>name</code> attribute groups this with other accordion items. When you open this item, any other open item in the same group will close automatically.
    </div>
  </details>
  <details class="accordion-item" name="accordionExampleTheme">
    <summary class="accordion-header">
      Accordion Item #3
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the third item's accordion body.</strong> This exclusive accordion behavior is built into the browser—no Bootstrap JavaScript required. Just use matching <code>name</code> attributes on your <code>&lt;details&gt;</code> elements.
    </div>
  </details>
</div>

Flush

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

Accordion Item #1

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

Accordion Item #2

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.

Accordion Item #3

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.

HTML

<div class="accordion accordion-flush">
  <details class="accordion-item" name="accordionFlushExample">
    <summary class="accordion-header">
      Accordion Item #1
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <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>
  </details>
  <details class="accordion-item" name="accordionFlushExample">
    <summary class="accordion-header">
      Accordion Item #2
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <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>
  </details>
  <details class="accordion-item" name="accordionFlushExample">
    <summary class="accordion-header">
      Accordion Item #3
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <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>
  </details>
</div>

Always open

Omit the name attribute on each <details> element to allow multiple accordion items to be open simultaneously.

Accordion Item #1

This is the first item's accordion body. Without the name attribute, each accordion item operates independently. You can open multiple items at the same time.

Accordion Item #2

This is the second item's accordion body. Opening this won't close the first item because there's no name attribute linking them together.

Accordion Item #3

This is the third item's accordion body. Each item is completely independent—open or close them in any combination you like.

HTML

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-header">
      Accordion Item #1
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the first item's accordion body.</strong> Without the <code>name</code> attribute, each accordion item operates independently. You can open multiple items at the same time.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">
      Accordion Item #2
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the second item's accordion body.</strong> Opening this won't close the first item because there's no <code>name</code> attribute linking them together.
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-header">
      Accordion Item #3
      <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m2 5 6 6 6-6"/></svg>
    </summary>
    <div class="accordion-body">
      <strong>This is the third item's accordion body.</strong> Each item is completely independent—open or close them in any combination you like.
    </div>
  </details>
</div>

Accessibility

The native <details> and <summary> elements provide built-in accessibility:

Screen readers announce the expanded/collapsed state automatically
Keyboard navigation works out of the box (Enter/Space to toggle)
The <summary> element is focusable by default
No ARIA attributes are required as the semantics are built into the elements

CSS

Variables

Accordions use local CSS variables on .accordion for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

SCSS

--accordion-color: #{$accordion-color};
--accordion-bg: #{$accordion-bg};
--accordion-transition: #{$accordion-transition};
--accordion-border-color: #{$accordion-border-color};
--accordion-border-width: #{$accordion-border-width};
--accordion-border-radius: var(--accordion-radius, var(--border-radius-lg));
// --accordion-border-radius: #{$accordion-border-radius};
// --accordion-inner-border-radius: #{$accordion-inner-border-radius};
--accordion-btn-padding-x: #{$accordion-button-padding-x};
--accordion-btn-padding-y: #{$accordion-button-padding-y};
--accordion-btn-color: #{$accordion-button-color};
--accordion-btn-bg: #{$accordion-button-bg};
--accordion-btn-icon-width: #{$accordion-icon-width};
--accordion-btn-icon-transform: #{$accordion-icon-transform};
--accordion-btn-icon-transition: #{$accordion-icon-transition};
--accordion-body-padding-x: #{$accordion-body-padding-x};
--accordion-body-padding-y: #{$accordion-body-padding-y};
--accordion-active-color: #{$accordion-button-active-color};
--accordion-active-bg: #{$accordion-button-active-bg};

Sass variables

SCSS

$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         var(--color-body);
$accordion-bg:                            var(--bg-body);
$accordion-border-width:                  var(--border-width);
$accordion-border-color:                  var(--border-color);
$accordion-border-radius:                 var(--border-radius-lg);
$accordion-inner-border-radius:           calc(#{$accordion-border-radius} - #{$accordion-border-width});

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  var(--fg-2);
$accordion-button-bg:                     var(--accordion-bg);
$accordion-transition:                    color .15s ease-in-out, background-color .15s ease-in-out, border-radius .15s ease;
$accordion-button-active-bg:              var(--bg-2);
$accordion-button-active-color:           var(--fg);

$accordion-icon-width:                    1rem;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

Customize

Custom icons

The accordion uses an inline SVG for the chevron icon. You can customize this by replacing the SVG within the .accordion-header:

HTML

<summary class="accordion-header">
  Accordion Title
  <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="m2 5 6 6 6-6"/>
  </svg>
</summary>

The .accordion-icon class handles positioning and the rotation animation when the accordion opens.

Events

You can listen for the native toggle event on <details> elements:

JavaScript

const accordionItem = document.querySelector('.accordion-item')
accordionItem.addEventListener('toggle', event => {
  if (event.target.open) {
    console.log('Accordion opened')
  } else {
    console.log('Accordion closed')
  }
})

Programmatic control

Toggle accordion items programmatically using the open property:

JavaScript

const accordionItem = document.querySelector('.accordion-item')

// Open the accordion
accordionItem.open = true

// Close the accordion
accordionItem.open = false

// Toggle the accordion
accordionItem.open = !accordionItem.open