Accordion

Built on details. Keyboard and screen reader support come from the browser, so there is no script.

When to use

For a set of related sections people will only need some of: frequently asked questions, eligibility by category.

When not to use

To hide content people need. If most people need to read it, show it. For one section, use a single details without the accordion wrapper.

Who can apply for a passport?

Any citizen. Children under 16 must apply with a parent or guardian present.

How long does it take?

Standard processing takes 6 weeks. Express processing takes 2 weeks and costs more.

What does it cost?

Fees depend on validity and number of pages. You pay online after your application is accepted.

Show HTML

<div class="ag-accordion ag-mb-0">
  <details class="ag-accordion__item">
    <summary class="ag-accordion__summary">Who can apply for a passport?</summary>
    <div class="ag-accordion__body">
      <p>Any citizen. Children under 16 must apply with a parent or guardian present.</p>
    </div>
  </details>
  <details class="ag-accordion__item">
    <summary class="ag-accordion__summary">How long does it take?</summary>
    <div class="ag-accordion__body">
      <p>Standard processing takes 6 weeks. Express processing takes 2 weeks and costs more.</p>
    </div>
  </details>
  <details class="ag-accordion__item">
    <summary class="ag-accordion__summary">What does it cost?</summary>
    <div class="ag-accordion__body">
      <p>Fees depend on validity and number of pages. You pay online after your application is accepted.</p>
    </div>
  </details>
</div>

Accessibility

The summary is a native disclosure button: Enter and Space toggle it, and its state is announced.
Search in page finds text inside closed sections in modern browsers.
Do not nest accordions.
Summaries are questions or short headings, not full sentences.