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>