Accordion

The :::accordion directive groups collapsible panels together. Each panel is an ::accordion-item with its own #heading slot and body content.

Basic usage

::accordion
  :::accordion-item
    #heading
    ### How do I file a FOIA request?

    #body
    Visit the FOIA portal at foia.gov...
  :::
  :::accordion-item
    #heading
    ### What is the response timeline?

    #body
    Agencies have 20 business days...
  :::
::

Bordered + multiselectable

Pass bordered for the USWDS bordered variant, and multiselectable to let users open more than one panel at a time. Pass expanded on individual items to start them open.

::accordion{bordered multiselectable}
  :::accordion-item{expanded}
    #heading
    ### Eligibility

    #body
    This item is open by default...
  :::
::

Deep linking

Headings inside accordion content get automatic anchor IDs from github-slugger. When the URL's hash matches a heading inside a collapsed panel, the panel expands automatically and the page scrolls to that heading.

Try these links — they'll open the accordion below and scroll to the target:

• Fee schedule
• Expedited processing

Props reference

Accordion

AccordionItem

Behavior notes

• The #heading slot becomes the clickable <button> inside USWDS's .usa-accordion__heading wrapper.
• Semantic heading level comes from the markdown you write inside #heading — ### Foo keeps an <h3> in the document outline, and the TOC picks it up.
• multiselectable maps to USWDS's data-allow-multiple attribute, which the USWDS JS reads to decide whether to auto-collapse siblings.
• Deep-link hash expansion is handled client-side by the accordion-hash utility, which runs on page load and on hashchange.

Source

Component: packages/astro/src/components/Accordion.tsx