Accordions

<div class="sl-stack sl-gap-4">
  <details class="sl-details" open>
    <summary>Do I need JavaScript?</summary>
    <p>
      No. The framework is CSS only. This accordion uses the browser’s native details
      and summary elements.
    </p>
  </details>
  <details class="sl-details">
    <summary>Can I customize the design?</summary>
    <p>
      Yes. Override design tokens, combine utility classes, or add your own stylesheet
      after StyloftCSS.
    </p>
  </details>
  <details class="sl-details">
    <summary>Can I use it in commercial projects?</summary>
    <p>
      Yes. StyloftCSS is MIT licensed. Include its copyright and license notice in
      copies of the software.
    </p>
  </details>
</div>

<details class="sl-details demo-narrow">
  <summary>A little more detail</summary>
  <div class="sl-stack">
    <p>Some information is useful when you need it, and quieter when you don't.</p>
    <a href="/getting-started/">Read the complete guide ↗</a>
  </div>
</details>

<div class="sl-stack" id="exclusive-accordion">
  <details class="sl-details" name="exclusive-demo" open>
    <summary>The foundation</summary>
    <p>
      One shared name, one open disclosure. Native keyboard behavior, no runtime
      JavaScript.
    </p>
  </details>
  <details class="sl-details" name="exclusive-demo">
    <summary>The palette</summary>
    <p>
      One shared name, one open disclosure. Native keyboard behavior, no runtime
      JavaScript.
    </p>
  </details>
  <details class="sl-details" name="exclusive-demo">
    <summary>The details</summary>
    <p>
      One shared name, one open disclosure. Native keyboard behavior, no runtime
      JavaScript.
    </p>
  </details>
</div>

<div class="sl-stack" id="multiple-accordion">
  <details class="sl-details" open>
    <summary>First answer</summary>
    <p>This answer can remain open while another is expanded.</p>
  </details>
  <details class="sl-details" open>
    <summary>Second answer</summary>
    <p>This answer can remain open while another is expanded.</p>
  </details>
  <details class="sl-details">
    <summary>Third answer</summary>
    <p>This answer can remain open while another is expanded.</p>
  </details>
</div>

<div class="sl-grid sl-md:cols-2 sl-gap-6">
  <section class="sl-stack">
    <h3 class="sl-text-lg">Design</h3>
    <details class="sl-details" name="design-demo" open>
      <summary>design question 1</summary>
      <p>A separate name isolates this group.</p>
    </details>
    <details class="sl-details" name="design-demo">
      <summary>design question 2</summary>
      <p>A separate name isolates this group.</p>
    </details>
  </section>
  <section class="sl-stack">
    <h3 class="sl-text-lg">Delivery</h3>
    <details class="sl-details" name="delivery-demo" open>
      <summary>delivery question 1</summary>
      <p>A separate name isolates this group.</p>
    </details>
    <details class="sl-details" name="delivery-demo">
      <summary>delivery question 2</summary>
      <p>A separate name isolates this group.</p>
    </details>
  </section>
</div>

<div class="sl-stack sl-gap-0">
  <details class="sl-details sl-details--flush">
    <summary>What can an answer contain?</summary>
    <div class="sl-stack">
      <p>Links, lists, and ordinary semantic content.</p>
      <ul>
        <li>Keep headings meaningful.</li>
        <li>Keep focus visible.</li>
      </ul>
      <a href="/getting-started/">Read the guide →</a>
    </div>
  </details>
  <details class="sl-details sl-details--flush">
    <summary>Can I leave everything closed?</summary>
    <p>
      Yes. Omit the open attribute. Exclusive groups also allow their last open item to
      close.
    </p>
  </details>
</div>