Accordion

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

How it works

The accordion uses collapse internally to make it collapsible. To render an accordion that's expanded, add the show prop on the x-accordion.item component.

Basic example

Click the accordions below to expand/collapse the accordion content. As you may notice the id it's not mandatory for x-accordion component since it's generated in component class when missed. In case you set the id that one will be used instead of generated one. The prop item on x-accordion.item component should be unique since will be used for set required id to accordion header and collapse button. In the generated HTML output you will notice the value of prop id used to set id="heading-generated-id" and id="collapse-generated-id". Like for id of x-accordion, the prop id of x-accordion.item it's not mandatory, in case is missing it will be generated in component class. Confused? You don't need. Just remember that you don't need to set any IDs.

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.

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.

<x-accordion>
  <x-accordion.item title="First accordion" show>
    <!-- Content go here -->
  </x-accordion.item>

  <x-accordion.item title="Second accordion">
    <!-- Content go here -->
  </x-accordion.item>

  <x-accordion.item title="Third accordion">
    <!-- Content go here -->
  </x-accordion.item>
</x-accordion>

<!-- Optionally you can set your custom IDs -->

<x-accordion id="myAccordion">
  <x-accordion.item id="myFirstItem" title="First accordion" show>
    <!-- Content go here -->
  </x-accordion.item>

  <x-accordion.item id="mySecondItem" title="Second accordion">
    <!-- Content go here -->
  </x-accordion.item>

  <x-accordion.item id="myThirdItem" title="Third accordion">
    <!-- Content go here -->
  </x-accordion.item>
</x-accordion>

<div id="accordion-24dpJuSDp4AJkwu3nbDW"
     class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-lmR8oqhbWdJKMGcnHD47">
      <button type="button"
          class="accordion-button"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-lmR8oqhbWdJKMGcnHD47"
          aria-expanded="true"
          aria-controls="collapse-lmR8oqhbWdJKMGcnHD47">First accordion</button>
    </h2>

    <div data-bs-parent="#accordion-24dpJuSDp4AJkwu3nbDW"
         id="collapse-lmR8oqhbWdJKMGcnHD47"
         aria-labelledby="heading-lmR8oqhbWdJKMGcnHD47"
         class="accordion-collapse 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 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.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-dc5q46FMKMNTNS5LDixe">
      <button type="button"
          class="accordion-button collapsed"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-dc5q46FMKMNTNS5LDixe"
          aria-expanded="false"
          aria-controls="collapse-dc5q46FMKMNTNS5LDixe">Second accordion</button>
    </h2>

    <div data-bs-parent="#accordion-24dpJuSDp4AJkwu3nbDW"
         id="collapse-dc5q46FMKMNTNS5LDixe"
         aria-labelledby="heading-dc5q46FMKMNTNS5LDixe"
         class="accordion-collapse 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 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.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-9bVpnfsiV5OwZl8fxhuF">
      <button type="button"
          class="accordion-button collapsed"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-9bVpnfsiV5OwZl8fxhuF"
          aria-expanded="false"
          aria-controls="collapse-9bVpnfsiV5OwZl8fxhuF">Third accordion</button>
    </h2>

    <div data-bs-parent="#accordion-24dpJuSDp4AJkwu3nbDW"
         id="collapse-9bVpnfsiV5OwZl8fxhuF"
         aria-labelledby="heading-9bVpnfsiV5OwZl8fxhuF"
         class="accordion-collapse 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 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.
      </div>
    </div>
  </div>
</div>

Flush and always open

Add prop flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. And add prop always-open to make accordion items stay open when another item is opened.

<x-accordion id="FlushAndAlwaysOpen" flush always-open>
    <!-- Content go here -->
</x-accordion>

<div id="FlushAndAlwaysOpen"
     class="accordion accordion-flush">
  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-BUnruCOWCgVWc48Xwh8d">
      <button type="button"
          class="accordion-button"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-BUnruCOWCgVWc48Xwh8d"
          aria-expanded="true"
          aria-controls="collapse-BUnruCOWCgVWc48Xwh8d">First accordion</button>
    </h2>

    <div id="collapse-BUnruCOWCgVWc48Xwh8d"
         aria-labelledby="heading-BUnruCOWCgVWc48Xwh8d"
         class="accordion-collapse collapse show"
         item="first2">
      <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 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.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-VLwpo1Wyqr07t0A86lJm">
      <button type="button"
          class="accordion-button collapsed"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-VLwpo1Wyqr07t0A86lJm"
          aria-expanded="false"
          aria-controls="collapse-VLwpo1Wyqr07t0A86lJm">Second accordion</button>
    </h2>

    <div id="collapse-VLwpo1Wyqr07t0A86lJm"
         aria-labelledby="heading-VLwpo1Wyqr07t0A86lJm"
         class="accordion-collapse collapse"
         item="second2">
      <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 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.
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header"
        id="heading-xgdtyU0CBpDl6a0zfaVF">
      <button type="button"
          class="accordion-button collapsed"
          data-bs-toggle="collapse"
          data-bs-target="#collapse-xgdtyU0CBpDl6a0zfaVF"
          aria-expanded="false"
          aria-controls="collapse-xgdtyU0CBpDl6a0zfaVF">Third accordion</button>
    </h2>

    <div id="collapse-xgdtyU0CBpDl6a0zfaVF"
         aria-labelledby="heading-xgdtyU0CBpDl6a0zfaVF"
         class="accordion-collapse collapse"
         item="third2">
      <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 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.
      </div>
    </div>
  </div>
</div>