Accordions
Keep long pages clear and easy to scan with accessible accordions that reveal detailed content only when users need it.
Accordions organize longer content into compact, expandable sections. They work especially well for FAQs, service details and other content that should remain collapsed until users need more information.
Choose whether the first item starts open or all sections remain collapsed. Allow only one item to be open at a time, or let users expand multiple sections independently.
Each accordion item can combine a title and text with an image and link. Place the image above, beside or between the title and content, control its width and spacing, and choose when it stacks for a responsive layout.
Accordions follow the WAI-ARIA design pattern, so screen readers can understand the relationship between titles and content, while keyboard users can navigate and expand sections without a mouse.
This keeps detailed information compact and accessible without moving it to separate pages.
