Accordion

Collapsible content sections with smooth animations

Examples

Basic accordion with single item open at a time.

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern with proper aria-expanded attributes and keyboard navigation support.

Is it styled?

Yes. It comes with theme-aware default styles that match your design system.

Is it animated?

Yes. It's animated by default with smooth height transitions.

html

Accordion with visual separation between items using .accordion-separated class.

What payment methods do you accept?

We accept all major credit cards, PayPal, and bank transfers.

Can I cancel my subscription?

Yes, you can cancel at any time. Access continues until billing period ends.

Do you offer refunds?

We offer a 14-day money-back guarantee.

html

Enable multiple items to be open simultaneously with data-allow-multiple attribute.

Feature One

Multiple items can be open at the same time.

Feature Two

Compare information across different sections.

Feature Three

Great for FAQ pages or documentation.

html

Import the accordion component in your JavaScript:

.accordion

.accordion-item

.accordion-trigger

.accordion-content

.accordion-body

.accordion-separated

.accordion-flush