An accordion is a vertically stacked list of items, such as questions or headings. Each item can be expanded or collapsed to reveal or hide associated content. Only one panel is typically open at a time, which keeps the interface compact and reduces visual clutter.

When you click a question, its answer expands. If another section was already open, it collapses automatically. This is often called an exclusive accordion or one-at-a-time pattern.

It improves readability and keeps the focus on the currently active topic.

Yes. We use semantic buttons with aria-expanded and aria-controls, plus region roles for panels. Keyboard navigation (Tab / Enter / Space) works natively. The icon is marked aria-hidden="true" because the state is already announced via aria-expanded.

This particular accordion is designed for single-open behavior — only one panel remains expanded. If you need multiple open sections, you would remove the part of the jQuery that closes the previously active item.

But for many use cases (FAQs, settings, navigation) single-open is ideal.