Accordion
Expandable content sections for organizing information. Available in basic (single open), always-open (multiple), and nested variants.
Basic
Only one item can be open at a time
_accordion.html.erb
███
█████████ █████████ █ █████ █████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
█ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
██████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ ████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
██████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ████ ████████████████
█████████████ █ ████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Always Open
Multiple items can be open simultaneously
_accordion.html.erb
███
█████████ █████████ █ ██████ ████ █████████
████████ █████ ███ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ███ ████████████████
█████████████ █ ███████████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Nested
Accordion within accordion for hierarchical content
_accordion.html.erb
███
█████████ █████████ █ ██████ █████████
█████████ ██████ █████████ ███ ████████████ ████████
████ █████████████ ████ ██ █████ ██████ ███ █████ ██ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█
██████ ███████ ███████ ███
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████ ██████ █████████████ ██████████████ ██████████
█
███ ████████████████████████ ███ █████████████ ██ ████████████████
█████████████ █ ███████████████████
█████████████ █ ████████████
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Changelog
- v1.0.0: Initial release with basic, always-open, and nested variants
- Full keyboard accessibility
- Stimulus controller for state management
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now