Accordion

Collapsible content sections using native <details> / <summary>.

Markup

Section 1

Content for section 1 goes here.

Section 2

Content for section 2 goes here.

Section 3 (Open)

This section is open by default.

<details class="af-accordion">
  <summary>Section 1</summary>
  <div class="af-accordion-content">
    <p>Content for section 1 goes here.</p>
  </div>
</details>
<details class="af-accordion">
  <summary>Section 2</summary>
  <div class="af-accordion-content">
    <p>Content for section 2 goes here.</p>
  </div>
</details>
<details class="af-accordion" open>
  <summary>Section 3 (Open)</summary>
  <div class="af-accordion-content">
    <p>This section is open by default.</p>
  </div>
</details>

Slide transition

Add af-has-slide for a CSS-only height + fade animation on open/close. Uses ::details-content, interpolate-size, and @starting-style — see Browser support below.

Section 1

Content for section 1 goes here.

Section 2

Content for section 2 goes here.

Section 3 (Open)

This section is open by default.

<details class="af-accordion af-has-slide">
  <summary>Section 1</summary>
  <div class="af-accordion-content">
    <p>Content for section 1 goes here.</p>
  </div>
</details>
<details class="af-accordion af-has-slide">
  <summary>Section 2</summary>
  <div class="af-accordion-content">
    <p>Content for section 2 goes here.</p>
  </div>
</details>
<details class="af-accordion af-has-slide" open>
  <summary>Section 3 (Open)</summary>
  <div class="af-accordion-content">
    <p>This section is open by default.</p>
  </div>
</details>

Parts

Class	Purpose
af-accordion	The <details> element
af-accordion-content	Body content below the summary
af-has-slide	Optional. Height + fade on open/close

Accessibility

• Use native <details> / <summary> — don’t reinvent disclosure with buttons unless you need multi-expand coordination.
• Motion respects prefers-reduced-motion via Airframe’s base styles.

Browser support

The accordion itself is a native <details> element and works everywhere. Only the optional af-has-slide animation depends on newer CSS, and it needs all three of these:

Feature	Chrome	Edge	Safari	Firefox
::details-content The animatable body wrapper	✓ 131 Supported from 131	✓ 131 Supported from 131	✓ 18.4 Supported from 18.4	✓ 143 Supported from 143
interpolate-size Animating height to and from auto	✓ 129 Supported from 129	✓ 129 Supported from 129	✕ No Not supported	✕ No Not supported
@starting-style The fade on open	✓ 117 Supported from 117	✓ 117 Supported from 117	✓ 17.5 Supported from 17.5	✓ 129 Supported from 129

Safari versions cover iOS Safari too. Without support: the accordion toggles instantly instead of sliding. No JavaScript is involved either way. Versions checked against MDN browser-compat-data, August 2026. See Browser Support for Airframe's baseline.

interpolate-size is the limiting factor: Safari and Firefox support the other two, so they get the fade but not the height slide.