Accordion

Collapsible content sections with single or multi-expand.

A copy-paste CSS component library. No build step.

Link the CSS, copy the HTML snippets.

<div x-data="{ open: null }">
  <div class="accordion">
    <div class="accordion-item">
      <button class="accordion-trigger"
        @click="open = open === 1 ? null : 1"
        :aria-expanded="open === 1">
        <span>Question?</span>
        <svg class="accordion-icon" viewBox="0 0 24 24" ...>
      </button>
      <div class="accordion-content" x-show="open === 1" x-collapse>
        <div class="accordion-content-inner">Answer here.</div>
      </div>
    </div>
  </div>
</div>