Accordions

Accordions are elements that expand when clicked. They allow you to hide content that is not immediately relevant to the user.

We use a checkbox <input type="checkbox"> and css to create these accordions. In this way no JavaScript is required.

Accordion Example

What is an accordion?

Accordions are elements that can be clicked to reveal or hide content associated with them.

html

<div class="accordion">
  <input type="checkbox" name="accordion-sample" id="accordion-sample">
  <label for="accordion-sample">
    <p>What is an accordion?</p>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
  </label>
  <div class="details">
    <p>An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them.</p>
  </div>
</div>