Accordion

Collapsible content sections using native <details> element.

Markup

<details class="af-accordion">
  <summary>
    Section 1
  </summary>
  <div class="af-accordion-content">
    <p>
      Content for section 1 goes here.
    </p>
  </div>
</details>
<details class="af-accordion" open>
  <summary>
    Section 2 (Open)
  </summary>
  <div class="af-accordion-content">
    <p>
      This section is open by default.
    </p>
  </div>
</details>

Live example

Section 1

Content for section 1 goes here.

Section 2

Content for section 2 goes here.

Section 3 (Open)

This section is open by default.