Accordions
JS Optional
Accordions are used to toggle sections of content.
It works by leveraging the :checked pseudo-class and the subsequent-sibling selector ~ to hide elements which do not match the combination.
html
<!-- 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.
html
<!-- 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>