Skip to Main Content
Mosaic Logo
Mosaic Logo
  • Home
  • Browse components
  • Use in projects
    • Colors
    • Themes
    • Icons
    • Grid
    • Links
    • Typography
    • Spacing Utilities
    • SVG
    • Accordions
    • Alerts
    • Badges
    • Buttons
    • Copy to clipboard
    • Cards
    • Featured Container
    • Filter Bar
    • Lists
    • Loading Spinners
    • Modals
    • Pagination
    • Progress Bars
    • Progress Indicator
    • Site Banner
    • Tables
    • Tabs
    • Toast
    • Toggle Switches
    • Well
    • Wizard
    • Events
    • File Browser
    • File Upload
    • Footer
    • Header
    • Hero
    • Post Item
    • Profile
    • Sidebar Navigation
    • Splash
    • Stack
    • Form Instructions
    • Form Layout
    • Form Validation
    • Form Output
    • Checkboxes
    • Labels
    • Radio Buttons
    • Search Input
    • Select
    • Text Inputs

Accordions

Standard with Title

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

This is a title for an accordion group with a long title to show how it wraps Lorem ipsum dolor sit amet consectetur adipiscing elit Quisq

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 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.


<script>
  document.addEventListener("DOMContentLoaded", function () {
    const toggleButtons = document.querySelectorAll(".toggleAccordions");

    toggleButtons.forEach((button) => {
      const targetId = button.getAttribute("data-target");
      const accordionGroup = document.getElementById(targetId);
      const accordions = accordionGroup.querySelectorAll(".accordion-collapse");
      let areAllExpanded = false;

      button.addEventListener("click", function () {
        if (!areAllExpanded) {
          // Expand all panels within the targeted accordion group
          accordions.forEach((accordion) => {
            if (!accordion.classList.contains("show")) {
              bootstrap.Collapse.getOrCreateInstance(accordion).show();
            }
          });
          button.textContent = "Collapse All";
          areAllExpanded = true;
        } else {
          // Collapse all panels within the targeted accordion group
          accordions.forEach((accordion) => {
            if (accordion.classList.contains("show")) {
              bootstrap.Collapse.getOrCreateInstance(accordion).hide();
            }
          });
          button.textContent = "Expand All";
          areAllExpanded = false;
        }
      });
    });
  });
</script>
<div class="accordion-group-title">
  This is a title for an accordion group with a long title to show how it wraps
  Lorem ipsum dolor sit amet consectetur adipiscing elit Quisq
</div>
<div class="text-end">
  <button class="toggleAccordions btn btn-link" data-target="crazyAccordion">
    Expand All
  </button>
</div>
<div class="accordion" id="crazyAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button
        class="accordion-button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOn"
        type="button"
        aria-expanded="true"
        aria-controls="collapseOn">
        <div class="d-flex flex-column justify-content-start">
          <span class="title">Accordion Item #1</span>
          <span class="sub">This accordion has some radio buttons!</span>
        </div>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse show"
      id="collapseOn"
      aria-labelledby="headingOne">
      <div class="accordion-body">
        <fieldset>
          <legend></legend>
          <form action="">
            <div class="form-check">
              <input
                class="form-check-input"
                id="myDefaultRadio"
                name="flexRadioDefault"
                type="radio" />
              <label class="form-check-label" for="myDefaultRadio">
                My default radio</label
              >
            </div>

            <div class="form-check">
              <input
                class="form-check-input"
                id="myDefaultChecked"
                name="flexRadioDefault"
                type="radio"
                checked />
              <label class="form-check-label" for="myDefaultChecked">
                My default checked radio
              </label>
            </div>
          </form>
        </fieldset>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapseOn"
          aria-expanded="false"
          aria-controls="collapseOn">
          Hide
        </button>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapseTw"
        type="button"
        aria-expanded="false"
        aria-controls="collapseTw">
        <div class="d-flex flex-column justify-content-start">
          <span class="title">Accordion Item #2</span>
          <span class="sub">This accordion has a table!</span>
        </div>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapseTw"
      aria-labelledby="headingTwo">
      <div class="accordion-body">
        <!-- Table Here -->
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapseTw"
          aria-expanded="false"
          aria-controls="collapseTw">
          Hide
        </button>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapseThre"
        type="button"
        aria-expanded="false"
        aria-controls="collapseThre">
        <div class="d-flex flex-column justify-content-start">
          <span class="title">Accordion Item #3</span>
          <span class="sub">This accordion has some text from BS5.</span>
        </div>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapseThre"
      aria-labelledby="headingThree">
      <div class="accordion-body">
        <p>
          <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's also worth noting that just about any HTML can go
          within the <code>.accordion-body</code>, though the transition does
          limit overflow.
        </p>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapseThre"
          aria-expanded="false"
          aria-controls="collapseThre">
          Hide
        </button>
      </div>
    </div>
  </div>
</div>

Flush (without borders)

adding the class .accordion-flush to the accordion will remove the borders.


Flush Accordion Title

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. 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.


<button class="toggleAccordions btn btn-link mb-2" data-target="accordionExample2">Expand All</button>
    <div class="accordion accordion-flush" id="accordionExample2"></div>

Only One Open at a Time

Add the data-bs-parent attribute on each .accordion-collapse to make accordion items close when another item is opened. Please note that because of the addition of the data-bs-parent the expand all / close all button is not needed. You can not over ride having only one open when the data-bs-parents is there.


Accordion Group Title for One Open at a Time

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. 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.


<div class="accordion-group-title">
  Accordion Group Title for One Open at a Time
</div>

<div class="accordion" id="accordionExample1">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button
        class="accordion-button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        type="button"
        aria-expanded="true"
        aria-controls="collapseOne">
        <div class="d-flex flex-column justify-content-start">
          <span class="title">Accordion Item #1</span>
          <span class="sub">Some subtext can go here.</span>
        </div>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse show"
      id="collapseOne"
      data-bs-parent="#accordionExample1"
      aria-labelledby="headingOne">
      <div class="accordion-body">
        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.
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapseOne"
          data-bs-parent="#accordionExample1"
          aria-expanded="false"
          aria-controls="collapseOne">
          Hide
        </button>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapseTwo"
        type="button"
        aria-expanded="false"
        aria-controls="collapseTwo">
        <span class="title">Accordion Item #2</span>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapseTwo"
      data-bs-parent="#accordionExample1"
      aria-labelledby="headingTwo">
      <div class="accordion-body">
        <p>
          <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's also worth noting that just about any HTML
          can go within the <code>.accordion-body</code>, though the transition
          does limit overflow.
        </p>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapseTwo"
          data-bs-parent="#accordionExample1"
          aria-expanded="false"
          aria-controls="collapseTwo">
          Hide
        </button>
      </div>
    </div>
  </div>
</div>

Filter variant

A filter variant is available. To use the filter variant add the .accordion-filter class to each .accordion-item.

Accordion 2 content.

Accordion 3 content.


<div class="accordion" id="accordion-1">
  <div class="accordion-item accordion-filter">
    <h2 class="accordion-header" id="heading-One">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-One"
        type="button"
        aria-expanded="false"
        aria-controls="collapse-One">
        <div class="d-flex flex-column justify-content-start">
          <span class="title">Accordion Label 1</span>
        </div>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapse-One"
      aria-labelledby="heading-One">
      <div class="accordion-body">
        <div>
          <ul class="filter-bar">
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="data-release"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="data-release">
                  Data Releases</label
                >
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="press-releases"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="press-releases">
                  Press Releases</label
                >
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="webinars"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="webinars">Webinars</label>
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="events"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="events">Events</label>
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="blog"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="blog">Blog</label>
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="data-resouce-blog"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="data-resouce-blog"
                  >Data Resource Guide</label
                >
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="media-kit"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="media-kit"
                  >Media Kit</label
                >
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="bulletin-newsletter"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="bulletin-newsletter"
                  >Bulletin Newsletter</label
                >
              </div>
            </li>
            <li>
              <div class="form-check">
                <input
                  class="form-check-input"
                  id="data-brunch-podcast"
                  type="checkbox"
                  value="" />
                <label class="form-check-label" for="data-brunch-podcast"
                  >Data brunch podcast</label
                >
              </div>
            </li>
          </ul>
        </div>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-One"
          aria-expanded="false"
          aria-controls="collapse-One">
          Hide
        </button>
      </div>
    </div>
  </div>
  <div class="accordion-item accordion-filter">
    <h2 class="accordion-header" id="heading-Two">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-Two"
        type="button"
        aria-expanded="false"
        aria-controls="collapse-Two">
        <span class="title">Accordion Label 2</span>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapse-Two"
      aria-labelledby="heading-Two">
      <div class="accordion-body">
        <p>Accordion 2 content.</p>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-Two"
          aria-expanded="false"
          aria-controls="collapse-Two">
          Hide
        </button>
      </div>
    </div>
  </div>
  <div class="accordion-item accordion-filter">
    <h2 class="accordion-header" id="heading-Three">
      <button
        class="accordion-button collapsed"
        data-bs-toggle="collapse"
        data-bs-target="#collapse-Three"
        type="button"
        aria-expanded="false"
        aria-controls="collapse-Three">
        <span class="title">Accordion Label 3</span>
      </button>
    </h2>
    <div
      class="accordion-collapse collapse"
      id="collapse-Three"
      aria-labelledby="heading-Three">
      <div class="accordion-body">
        <p>Accordion 3 content.</p>
        <button
          class="btn accordion-close btn-sm"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-Three"
          aria-expanded="false"
          aria-controls="collapse-Three">
          Hide
        </button>
      </div>
    </div>
  </div>
</div>

Handling Expand / Close all

To help users search a page we are adding an Expand/Close All button to each accordion. Please note that you'll need to target each accordion group. The variable accordionGroup in the code below is the ID of the accordion group and will make it so only that specific accordion opens.


 
  <script>
  document.addEventListener("DOMContentLoaded", function () {
    const toggleButtons = document.querySelectorAll(".toggleAccordions");

    toggleButtons.forEach((button) => {
      const targetId = button.getAttribute("data-target");
      const accordionGroup = document.getElementById(targetId);
      const accordions = accordionGroup.querySelectorAll(".accordion-collapse");

      function updateButtonState() {
        // Check if all accordion items in this group are open
        const allOpen = Array.from(accordions).every((accordion) => accordion.classList.contains("show"));
        button.textContent = allOpen ? "Close All" : "Expand All";
      }

      button.addEventListener("click", function () {
        const allOpenInitially = Array.from(accordions).every(accordion => accordion.classList.contains("show"));
        
        // Toggle all accordions based on the initial open state
        if (allOpenInitially) {
          accordions.forEach((accordion) => {
            if (accordion.classList.contains("show")) {
              bootstrap.Collapse.getOrCreateInstance(accordion).hide();
            }
          });
        } else {
          accordions.forEach((accordion) => {
            if (!accordion.classList.contains("show")) {
              bootstrap.Collapse.getOrCreateInstance(accordion).show();
            }
          });
        }

        // Update the button state after the toggle action
        updateButtonState();
      });

      // Attach event listeners to compute the button state whenever an accordion is toggled
      accordions.forEach((accordion) => {
        accordion.addEventListener('shown.bs.collapse', updateButtonState);
        accordion.addEventListener('hidden.bs.collapse', updateButtonState);
      });

      // Set initial button text based on current state
      updateButtonState();
    });
  });
</script>
    
  • facebook

  • Instagram

  • Twitter

  • LinkedIn

  • YouTube

  • Accessibility
  • Privacy Policy
  • Contact Us
Sign up for our newsletter
ICPSR

© 2025 The Regents of the University of Michigan. ICPSR is part of the Institute for Social Research at the University of Michigan.