Accordion

Disclosure built on native details and summary.

Source: src/stylus/components/accordion.styl

Default

Native <details> means keyboard support and find-in-page come for free.

What makes Skeletonic Stylus unique?

It compiles to native CSS with cascade layers and zero runtime JavaScript.

Does it work with Tailwind?

Yes — everything is scoped inside @layer skeletonic.*.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-trigger"><span>What makes Skeletonic Stylus unique?</span></summary>
    <div class="accordion-content"><p>It compiles to native CSS with cascade layers and zero runtime JavaScript.</p></div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-trigger"><span>Does it work with Tailwind?</span></summary>
    <div class="accordion-content"><p>Yes — everything is scoped inside <code>@layer skeletonic.*</code>.</p></div>
  </details>
</nav>