Accordion

Accordion is used for toggling visiblity of content.

Properties#

NameDescription
.accordion The accordion component container
.accordion-indicator Used with an input tag to indicate if the accordion is open
.accordion-header The title of the accordion component
.accordion-body The content of the accordion component

.open

[open]

 The switch to control accrodion open/close


Features#

with checkbox input#



with radio input#



<div>
  <div class="accordion">
    <input class="accordion-indicator" id="accordion-0" type="checkbox" name="accordion-checkbox-0" hidden checked />
    <label class="accordion-header" for="accordion-0">
      One
    </label>
    <div class="accordion-body">
      <!-- content -->
    </div>
  </div>
  <div class="accordion">
    <input class="accordion-indicator" id="accordion-1" type="checkbox" name="accordion-checkbox-0" hidden />
    <label class="accordion-header" for="accordion-1">
      Two
    </label>
    <div class="accordion-body">
      <!-- content -->
    </div>
  </div>
</div>

toggle with .open#

Use class .open to toggle the content instead of an input tag

<div class="accordion open">
  <label class="accordion-header">
    One
  </label>
  <div class="accordion-body">
    <!-- content -->
  </div>
</div>

semantic tag#

If IE11 is not your targeted browser. You may also use the semantic HTML tags details summary to implement a "collapsable" component.

One 
<details class="accordion" open>
  <summary class="accordion-header">
    One
  </summary>
  <div class="accordion-body">
    <!-- content -->
  </div>
</details>
hello