What is Accordion?

An accordion is a list of header buttons, each paired with a panel. Activating a header shows or hides its panel, and the rest of the page moves down or up to make room. Some accordions allow several panels open at once; others close the open panel when a new one opens. The pattern trades a little interaction cost for a much shorter page, which is why it shows up in FAQs, settings pages, filters and mobile layouts where vertical space is scarce.

When to use it

• Reference content people scan for one answer, such as an FAQ or a list of shipping policies. Users read the headings and open the one that matches their question.
• Optional detail under a summary, like advanced settings or a breakdown under a total.
• Narrow screens, where a long page of sections would force a lot of scrolling.
• Avoid it for content most people need to read in full, or for steps in a sequence. Hiding required reading behind clicks slows everyone down; use headings and a table of contents or a stepper instead.

Accessibility

The WAI-ARIA Authoring Practices accordion pattern is small but specific. Each header is a real button wrapped in a heading element (h3, for example) at the right level for the page outline. The button carries aria-expanded="true" or "false" and aria-controls pointing at its panel. The panel can take role="region" with aria-labelledby referencing its button, which is useful when there are only a handful of panels. Enter and Space toggle a panel, and Tab moves through the headers and into any open panel's content. Down Arrow, Up Arrow, Home and End for moving between headers are optional in the pattern but welcome.

Two details are easy to miss. Collapsed content should be hidden from assistive technology, not just clipped visually, and browser find-in-page should still work. The HTML hidden="until-found" attribute lets Ctrl+F open a collapsed panel; Base UI exposes it as the hiddenUntilFound prop. Also keep the expand animation short and respect prefers-reduced-motion.

How to build one in React

MiniDev's Accordion wraps the Base UI primitive, so the roles, states and keyboard handling above are already wired. You supply headings and content:

import { Accordion, AccordionItem, AccordionTrigger, AccordionPanel } from "@/components/ui/accordion"

export function ShippingFaq() {
  return (
    <Accordion className="max-w-lg">
      <AccordionItem value="time">
        <AccordionTrigger>How long does shipping take?</AccordionTrigger>
        <AccordionPanel>Orders ship in 1 to 2 business days.</AccordionPanel>
      </AccordionItem>
      <AccordionItem value="returns">
        <AccordionTrigger>Can I return an item?</AccordionTrigger>
        <AccordionPanel>Yes, within 30 days of delivery.</AccordionPanel>
      </AccordionItem>
    </Accordion>
  )
}

Install it with npx shadcn@latest add https://ui.minidev.pro/r/accordion.json. For a ready FAQ section, FaqList builds on the same primitive. More layout primitives live in the layout category.