Accordion

Native disclosure for FAQs, comparisons, and step-by-step flows, only the plus/minus toggles, content reveals on open.

Examples

An Accordion wraps a set of .accordion__item disclosures in a .accordion. Each item is a native <details> with a <summary> and an .accordion__body. The + indicator flips to − on open.

How does Convert handle privacy?

First-party cookies only, GDPR/CCPA ready, and no data shared with third parties.

Can I run server-side tests?

Yes, the same targeting engine powers client- and server-side experiments.

What integrations are supported?

100+ analytics, CDP, and CMS integrations out of the box.

<div class="accordion">
  <details class="accordion__item" open>
    <summary>How does Convert handle privacy?</summary>
    <div class="accordion__body">First-party cookies only, GDPR/CCPA ready, and no data shared with third parties.</div>
  </details>
  <details class="accordion__item">
    <summary>Can I run server-side tests?</summary>
    <div class="accordion__body">Yes, the same targeting engine powers client- and server-side experiments.</div>
  </details>
  <details class="accordion__item">
    <summary>What integrations are supported?</summary>
    <div class="accordion__body">100+ analytics, CDP, and CMS integrations out of the box.</div>
  </details>
</div>

Usage

Accordions collapse long content into scannable rows. Reach for them when the answers are secondary to the questions.

Use for FAQs, comparison categories, or step-by-step flows where each row stands on its own.
Use native <details> / <summary>, the disclosure works without any JavaScript.
Keep the open panel on a white or cream surface so the body text stays legible.
Only the + / − changes on open, don't add chevrons or other competing affordances.

States

Each item has two states. Closed shows a + with the body hidden; open shows a − with the .accordion__body revealed. Because it's native <details>, multiple items can be open at once, there's no single-open constraint unless you add one.

Code

The .accordion classes ship in accordion.css. Add the stylesheet, then render a .accordion wrapping one <details class="accordion__item"> per row.

<link rel="stylesheet" href="/_shared/components/accordion.css">

<div class="accordion">
  <details class="accordion__item" open>
    <summary>How does Convert handle privacy?</summary>
    <div class="accordion__body">First-party cookies only, GDPR/CCPA ready, and no data shared with third parties.</div>
  </details>
  <details class="accordion__item">
    <summary>Can I run server-side tests?</summary>
    <div class="accordion__body">Yes, the same targeting engine powers client- and server-side experiments.</div>
  </details>
  <details class="accordion__item">
    <summary>What integrations are supported?</summary>
    <div class="accordion__body">100+ analytics, CDP, and CMS integrations out of the box.</div>
  </details>
</div>