Use the viewport controls to check responsive behavior, then copy the implementation that fits your stack.
4 patterns
Simple FAQ accordion
A native details-based FAQ with no custom JavaScript.
faqnative
Accessibility
Native details and summary provide robust keyboard behavior and state semantics.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Bordered accordion
Grouped disclosure panels with stronger visual containment.
bordereddisclosure
Accessibility
The container changes appearance without replacing native disclosure behavior.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Minimal accordion
An understated disclosure list for editorial pages.
minimaleditorial
Accessibility
The entire summary remains a native keyboard-operable disclosure control.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Card accordion
Separated disclosure cards for distinct groups of information.
cardssections
Accessibility
Visual cards retain the native details and summary relationship.
Uses native semantic elements and visible keyboard focus.
Text and controls do not rely on colour alone.
Responsive behaviour
Reflows below 620px without horizontal page overflow.
Interactive targets remain usable for touch and zoom.
Implementation notes
These examples use plain CSS and no external dependencies. Replace sample content and destinations while preserving the semantic structure, labels, focus treatment and responsive behavior.