Sample

An accordion is a vertically stacked list of items that can expand to reveal hidden content. It helps keep the interface clean and organized.

Use accordions when you have a lot of related information that doesn’t need to be displayed all at once, like FAQs or detailed sections in documentation.

Accordions save space, improve readability, and guide users through information in smaller, more digestible pieces.

Always make accordion items keyboard-navigable and provide clear labels for screen readers to ensure an inclusive experience.

Keep titles short and clear, animate the open/close action smoothly, and use consistent icons or indicators for expand/collapse states.