Build an Accordion
An accordion is the FAQ pattern: click a heading to expand the answer below it. You will use class toggles, aria-expanded, and a click handler.
Step 1 of 3
An accordion is just a collapsible card
Each item in an accordion has a heading (always visible) and a body (hidden until clicked). The state lives in a class — usually open — that JS toggles when the heading is clicked. CSS does the visual work.
For accessibility, the heading should be a <button> with an aria-expanded attribute that JS keeps in sync. Screen reader users hear 'expanded' or 'collapsed' depending on state.
Think of it this way: Imagine those question-and-answer cards in a quiz pack. The question is always on the front; the answer shows only when you flip it. The class toggle is the flip.
Web Standard
Use <button> for the heading, not a <div>. Buttons are keyboard-focusable and screen-reader-friendly without extra work.
Learn more on MDN