View on GitLab

Accordions

Accordions are composed by two essential elements: x-larastrap::accordion is the container wrapping all panels involved in the same block, and x-larastrap::accordionitem is a single collapsible panel within the block.

HTML IDs used by Bootstrap to link each button to each collapsible accordion panel are automatically generated.

This is the first accordion

This is the second accordion

This is the third accordion

<x-larastrap::accordion>
    <x-larastrap::accordionitem label="First">
        <p>This is the first accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Second">
        <p>This is the second accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Third">
        <p>This is the third accordion</p>
    </x-larastrap::accordionitem>
</x-larastrap::accordion>

<div class="accordion" id="accordion-757d1ea1bcb1388c832800bcecb79f06">
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-2f9b5e40f45e19de782632fe53d6d522">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-2f9b5e40f45e19de782632fe53d6d522" aria-expanded="false" aria-controls="accordionitem-2f9b5e40f45e19de782632fe53d6d522">First</button>
    </h2>
    <div id="accordionitem-2f9b5e40f45e19de782632fe53d6d522" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-2f9b5e40f45e19de782632fe53d6d522" data-bs-parent="#accordion-757d1ea1bcb1388c832800bcecb79f06">
      <div class="accordion-body">
        <p>
          This is the first accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-4c468ca9e55878a4cba73a97cf292f2f">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-4c468ca9e55878a4cba73a97cf292f2f" aria-expanded="false" aria-controls="accordionitem-4c468ca9e55878a4cba73a97cf292f2f">Second</button>
    </h2>
    <div id="accordionitem-4c468ca9e55878a4cba73a97cf292f2f" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-4c468ca9e55878a4cba73a97cf292f2f" data-bs-parent="#accordion-757d1ea1bcb1388c832800bcecb79f06">
      <div class="accordion-body">
        <p>
          This is the second accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-f25dfe51fce56d01888acad2245de6b1">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-f25dfe51fce56d01888acad2245de6b1" aria-expanded="false" aria-controls="accordionitem-f25dfe51fce56d01888acad2245de6b1">Third</button>
    </h2>
    <div id="accordionitem-f25dfe51fce56d01888acad2245de6b1" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-f25dfe51fce56d01888acad2245de6b1" data-bs-parent="#accordion-757d1ea1bcb1388c832800bcecb79f06">
      <div class="accordion-body">
        <p>
          This is the third accordion
        </p>
      </div>
    </div>
  </div>
</div>

active

With the active parameter applied to x-larastrap::accordionitem it is possible to specify which panels display as opened by default.

This is the first accordion and is closed by default

This is the second accordion and is opened by default

This is the third accordion and is closed by default

<x-larastrap::accordion>
    <x-larastrap::accordionitem label="First">
        <p>This is the first accordion and is closed by default</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Second" active="true">
        <p>This is the second accordion and is opened by default</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Third">
        <p>This is the third accordion and is closed by default</p>
    </x-larastrap::accordionitem>
</x-larastrap::accordion>

<div class="accordion" id="accordion-28e783d40335fcc71792d5ad401898d1">
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-348532d086f8f916b88b6ed57e44eaee">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-348532d086f8f916b88b6ed57e44eaee" aria-expanded="false" aria-controls="accordionitem-348532d086f8f916b88b6ed57e44eaee">First</button>
    </h2>
    <div id="accordionitem-348532d086f8f916b88b6ed57e44eaee" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-348532d086f8f916b88b6ed57e44eaee" data-bs-parent="#accordion-28e783d40335fcc71792d5ad401898d1">
      <div class="accordion-body">
        <p>
          This is the first accordion and is closed by default
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-6b21c38074a017272b89591fa949826f">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-6b21c38074a017272b89591fa949826f" aria-expanded="true" aria-controls="accordionitem-6b21c38074a017272b89591fa949826f">Second</button>
    </h2>
    <div id="accordionitem-6b21c38074a017272b89591fa949826f" class="accordion-collapse collapse show" aria-labelledby="head-accordionitem-6b21c38074a017272b89591fa949826f" data-bs-parent="#accordion-28e783d40335fcc71792d5ad401898d1">
      <div class="accordion-body">
        <p>
          This is the second accordion and is opened by default
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-bbbaa9ebe54b8a5ef28816dba3f4c98f">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-bbbaa9ebe54b8a5ef28816dba3f4c98f" aria-expanded="false" aria-controls="accordionitem-bbbaa9ebe54b8a5ef28816dba3f4c98f">Third</button>
    </h2>
    <div id="accordionitem-bbbaa9ebe54b8a5ef28816dba3f4c98f" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-bbbaa9ebe54b8a5ef28816dba3f4c98f" data-bs-parent="#accordion-28e783d40335fcc71792d5ad401898d1">
      <div class="accordion-body">
        <p>
          This is the third accordion and is closed by default
        </p>
      </div>
    </div>
  </div>
</div>

alway_open

When the parameter alway_open is set to false on a x-larastrap::accordion (the default), opening a panel implies close the others. When set to true , the uncollapsed panel stay opened even when another one is triggered.

This is the first accordion

This is the second accordion

This is the third accordion

<x-larastrap::accordion always_open="true">
    <x-larastrap::accordionitem label="First">
        <p>This is the first accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Second">
        <p>This is the second accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label="Third">
        <p>This is the third accordion</p>
    </x-larastrap::accordionitem>
</x-larastrap::accordion>

<div class="accordion" id="accordion-d74e98b29d1f6bcb9e50847bbabb3b92">
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-b4195bd6909a0e12321de5b90f1e3a71">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-b4195bd6909a0e12321de5b90f1e3a71" aria-expanded="false" aria-controls="accordionitem-b4195bd6909a0e12321de5b90f1e3a71">First</button>
    </h2>
    <div id="accordionitem-b4195bd6909a0e12321de5b90f1e3a71" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-b4195bd6909a0e12321de5b90f1e3a71">
      <div class="accordion-body">
        <p>
          This is the first accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-757f06e9bfe8f17e9248dfcacaa36420">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-757f06e9bfe8f17e9248dfcacaa36420" aria-expanded="false" aria-controls="accordionitem-757f06e9bfe8f17e9248dfcacaa36420">Second</button>
    </h2>
    <div id="accordionitem-757f06e9bfe8f17e9248dfcacaa36420" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-757f06e9bfe8f17e9248dfcacaa36420">
      <div class="accordion-body">
        <p>
          This is the second accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-af5ede28c003706b1c4db4e91a96b833">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionitem-af5ede28c003706b1c4db4e91a96b833" aria-expanded="false" aria-controls="accordionitem-af5ede28c003706b1c4db4e91a96b833">Third</button>
    </h2>
    <div id="accordionitem-af5ede28c003706b1c4db4e91a96b833" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-af5ede28c003706b1c4db4e91a96b833">
      <div class="accordion-body">
        <p>
          This is the third accordion
        </p>
      </div>
    </div>
  </div>
</div>

label_html

As in many other components, label_html is an helper attribute to assign an HTML label to an x-larastrap::accordionitem .

This is the first accordion

This is the second accordion

This is the third accordion

<x-larastrap::accordion>
    <x-larastrap::accordionitem label_html="<i class='bi bi-1-square-fill'></i>">
        <p>This is the first accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label_html="<i class='bi bi-2-circle-fill'></i>">
        <p>This is the second accordion</p>
    </x-larastrap::accordionitem>

    <x-larastrap::accordionitem label_html="<i class='bi bi-3-square'></i>">
        <p>This is the third accordion</p>
    </x-larastrap::accordionitem>
</x-larastrap::accordion>

<div class="accordion" id="accordion-244772d25caa43478615695708ef3d4b">
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-c02b0b198f72d5bc52c6976230cbe9fd"></h2>
    <div id="accordionitem-c02b0b198f72d5bc52c6976230cbe9fd" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-c02b0b198f72d5bc52c6976230cbe9fd" data-bs-parent="#accordion-244772d25caa43478615695708ef3d4b">
      <div class="accordion-body">
        <p>
          This is the first accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-04dccc994d407d1f6b95aa8e11e3c97e"></h2>
    <div id="accordionitem-04dccc994d407d1f6b95aa8e11e3c97e" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-04dccc994d407d1f6b95aa8e11e3c97e" data-bs-parent="#accordion-244772d25caa43478615695708ef3d4b">
      <div class="accordion-body">
        <p>
          This is the second accordion
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="head-accordionitem-f062ef505e576e938f12f81263fe8b96"></h2>
    <div id="accordionitem-f062ef505e576e938f12f81263fe8b96" class="accordion-collapse collapse" aria-labelledby="head-accordionitem-f062ef505e576e938f12f81263fe8b96" data-bs-parent="#accordion-244772d25caa43478615695708ef3d4b">
      <div class="accordion-body">
        <p>
          This is the third accordion
        </p>
      </div>
    </div>
  </div>
</div>

Intro

Components

Forms

Containers

Custom Elements

More

About

Accordions

First

Second

Third

active

First

Second

Third

alway_open

First

Second

Third

label_html