Accordions#

Accordions are used to toggle sections of content.

<!-- standard Accordions example -->
<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
  <label class="accordion-header" for="accordion-1">
    <i class="icon icon-arrow-right mr-1"></i>
    Title
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

<!-- mutually exclusive Accordions example (with same input names) -->
<div class="accordion">
  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
  <label class="accordion-header" for="accordion-1">
    Title
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is under consideration.

<!-- details and summary Accordions example -->
<details class="accordion" open>
  <summary class="accordion-header">
    <i class="icon icon-arrow-right mr-1"></i>
    Title
  </summary>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</details>