Accordions

Accordions are implemented using the <details> and <summary> elements, which provide a native way to create collapsible content sections with keyboard navigation and screen reader support without the need for JavaScript.

Basic Usage

<details>
  <summary>Accordion 1</summary>
  <p>
    This content is hidden by default and revealed when you click the summary.
    Accordions are great for organizing content into collapsible sections.
  </p>
</details>

Entangled accordions

Set the same name attribute on multiple <details> elements to create an exclusive accordion where only one can be open at a time.

Use the open attribute to expand it by default.

<details name="accordion-group">
  <summary>Accordion 1</summary>
  <p>
    This content is hidden by default and revealed when you click the summary.
    Accordions are great for organizing content into collapsible sections.
  </p>
</details>

<hr />

<details name="accordion-group" open>
  <summary>Accordion 2</summary>
  <ul>
    <li>This accordion starts in the open state.</li>
    <li>Use the <code>open</code> attribute to expand by default.</li>
    <li>Click the summary to collapse.</li>
    <li>Great for FAQ sections or settings panels.</li>
  </ul>
</details>

FAQ Page Example

<h1>Frequently Asked Questions</h1>
<br>
<section>
  <details>
    <summary>How do I get started?</summary>
    <div>
      <p>Simply include the CSS file in your HTML and start using the classes.</p>
    </div>
  </details>

  <hr />

  <details>
    <summary>Can I customize the colors?</summary>
    <div>
      <p>Yes! Override the CSS variables to customize colors and more.</p>
    </div>
  </details>

  <hr />

  <details>
    <summary>Is JavaScript required?</summary>
    <div>
      <p>No! Semanticus CSS is pure CSS with zero JavaScript dependencies.</p>
    </div>
  </details>
</section>

As a Button

<details>
  <summary role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>

Intent Variants

To convey intent and importance, accordions can be styled with different variants:

See code

<details>
  <summary class="primary mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="secondary mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="contrast mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="success mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="info mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="warning mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="danger mb-d" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>

Modifiers

.ghost creates transparent background accordions with colored text and borders, useful for secondary actions where you want minimal visual weight.

See code

<details>
  <summary class="primary mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="secondary mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="contrast mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="success mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="info mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="warning mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="danger mb-d ghost" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>

.subtle creates accordions with a more muted appearance, often used for less prominent actions.

See code

<details>
  <summary class="primary mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="secondary mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="contrast mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="success mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="info mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="warning mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>
<details>
  <summary class="danger mb-d subtle" role="button">
    Button-style Accordion
  </summary>
  <p>The <code>summary[role=button]</code> turns the accordion trigger into a full-width button.</p>
</details>