COMPONENTS

Accordions

Native details and summary elements provide the interaction. One accordion wrapper arranges the group; theme, shape, density, spacing, borders, depth, material and motion inherit from the parent.

Usage

Markup: .accordion > details > summary

Behaviour: Exclusive groups depend on native details name support. Inherited motion enhances expansion where intrinsic-size transitions are supported; native instant disclosure is the fallback.

  • Keep summary as the first child of details. A rotating CSS chevron replaces the visual marker; native keyboard behavior remains intact; do not add button roles or manually maintained aria-expanded attributes.
  • Omit name to allow multiple items to stay open. Give details a shared, unique name for native exclusive groups. Browsers without exclusive-group support still provide independent disclosure toggles. Names are document-wide, so separate accordion instances need different names.
  • Use open on at most one item in an exclusive group. CSS does not add custom arrow-key navigation or force collapsed content to print.
  • Motion is included in the core and accordion module: none opens instantly, subtle expands and rotates the chevron over 140ms, and expressive adds a content fade over 240ms. Height transitions require ::details-content, interpolate-size and discrete transitions; other browsers use instant native disclosure. Reduced-motion preferences disable transitions.

Component API and styling module · Inherited appearance settings

Independent sections

Each native disclosure opens and closes independently. The wrapper supplies spacing without extra classes on items.

What does RevaCSS include?

Native HTML styling and optional components.

Do I need JavaScript?

These accordions work through native browser behavior.

HTMLSelect text to copy
<div class="accordion">
  <details open>
    <summary>What does RevaCSS include?</summary>
    <p>Native HTML styling and optional components.</p>
  </details>
  <details>
    <summary>Do I need JavaScript?</summary>
    <p>These accordions work through native browser behavior.</p>
  </details>
</div>

One item open at a time

Matching name attributes request an exclusive group. Use a different name for every group in your document.

How do I create an account?

Complete the registration form.

How do I change my details?

Open your profile settings.

HTMLSelect text to copy
<div class="accordion">
  <details name="account-faq" open>
    <summary>How do I create an account?</summary>
    <p>Complete the registration form.</p>
  </details>
  <details name="account-faq">
    <summary>How do I change my details?</summary>
    <p>Open your profile settings.</p>
  </details>
</div>

Inherited motion intensity

Choose motion once on a parent. Open and close each section to compare instant, subtle and expressive behaviour. Reduced motion wins; browsers without intrinsic-size transitions retain native disclosure.

None

How does none motion work?

The content and indicator change immediately.

The browser owns the open state and keyboard behaviour.

Subtle

How does subtle motion work?

Content expands smoothly and the indicator rotates.

The browser owns the open state and keyboard behaviour.

Expressive

How does expressive motion work?

Content expands with a gentle fade and a rotating indicator.

The browser owns the open state and keyboard behaviour.

HTMLSelect text to copy
<section data-motion="none">
  <h3>None</h3>
  <div class="accordion">
    <details>
      <summary>How does none motion work?</summary>
      <p>The content and indicator change immediately.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>
<section data-motion="subtle">
  <h3>Subtle</h3>
  <div class="accordion">
    <details>
      <summary>How does subtle motion work?</summary>
      <p>Content expands smoothly and the indicator rotates.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>
<section data-motion="expressive">
  <h3>Expressive</h3>
  <div class="accordion">
    <details>
      <summary>How does expressive motion work?</summary>
      <p>Content expands with a gentle fade and a rotating indicator.</p>
      <p>The browser owns the open state and keyboard behaviour.</p>
    </details>
  </div>
</section>

Inherited material and shape

Configure the wrapper once. Both native disclosures inherit glass, dark colours and roundness.

Shared appearance

This disclosure follows its parent settings.

More information

No component attributes are repeated.

HTMLSelect text to copy
<div class="accordion" data-theme="dark" data-material="glass"
     data-shape="rounded" data-gap="small">
  <details>
    <summary>Shared appearance</summary>
    <p>This disclosure follows its parent settings.</p>
  </details>
  <details>
    <summary>More information</summary>
    <p>No component attributes are repeated.</p>
  </details>
</div>