Accessible Accordion
An accessible accordion component that reveals and hides content when triggered, providing keyboard navigation, proper ARIA attributes, and screen reader support. Each section can be expanded or collapsed independently, allowing users to focus on specific content while reducing visual clutter.
Sample accordion
The default behavior of the accordion is to open and close the panel when the trigger is clicked.
Accordion with open and close animation
The accordion will open and close with a smooth animation.
Accordion with multiple opened panels
The accordion will allow multiple panels to be opened at the same time.
Accordion with all closable panels
The accordion will allow all panels to be closed.
Accordion with closed panels by default
The accordion will close all panels by default.
Accordion with events
The accordion will trigger events when a panel is opened or closed.
Accordion but only for < 600px devices
The accordion will only be visible on devices with a width of less than 600px.