Accordion

Collapsible sections. The accordion Stimulus controller toggles the open class on each item; the CSS animates the expand/collapse via a grid-template-rows transition. Click the headers below — they're live.

Live Example

What is Ziom?

Ziom is a CSS design system inspired by Apple's iOS design language.

How do I use a component?

Apply the documented ziom-* classes directly to your markup.

HTML

<div class="ziom-accordion">
  <div class="ziom-accordion-item" data-controller="accordion" data-accordion-open-value="true">
    <button class="ziom-accordion-header" data-action="click->accordion#toggle" aria-expanded="true">
      <span>What is Ziom?</span>
      <i class="ph ph-caret-down ziom-accordion-chevron"></i>
    </button>
    <div class="ziom-accordion-body">
      <div class="ziom-accordion-body-content">
        <div class="ziom-accordion-body-inner">
          Ziom is a CSS design system inspired by Apple's iOS design language.
        </div>
      </div>
    </div>
  </div>
  <div class="ziom-accordion-item" data-controller="accordion" data-accordion-open-value="false">
    <button class="ziom-accordion-header" data-action="click->accordion#toggle" aria-expanded="false">
      <span>How do I use a component?</span>
      <i class="ph ph-caret-down ziom-accordion-chevron"></i>
    </button>
    <div class="ziom-accordion-body">
      <div class="ziom-accordion-body-content">
        <div class="ziom-accordion-body-inner">
          Apply the documented <code>ziom-*</code> classes directly to your markup.
        </div>
      </div>
    </div>
  </div>
</div>