Akkordeon
Ausklappbare Inhaltsbereiche zur übersichtlichen Organisation von Informationen. Verfügbar als einfache Variante (einzeln geöffnet), immer-offen (mehrere gleichzeitig) und verschachtelt.
Einfach
Es kann jeweils nur ein Element geöffnet sein
_accordion.html.erb
███
█████████ █████████ █ █████ █████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
█ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
██████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ ████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
██████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ████ ████████████████
█████████████ █ ████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Immer offen
Mehrere Elemente können gleichzeitig geöffnet sein
_accordion.html.erb
███
█████████ █████████ █ ██████ ████ █████████
████████ █████ ███ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ███ ████████████████
█████████████ █ ███████████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Verschachtelt
Akkordeon innerhalb eines Akkordeons für hierarchische Inhalte
_accordion.html.erb
███
█████████ █████████ █ ██████ █████████
█████████ ██████ █████████ ███ ████████████ ████████
████ █████████████ ████ ██ █████ ██████ ███ █████ ██ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█
██████ ███████ ███████ ███
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████ ██████ █████████████ ██████████████ ██████████
█
███ ████████████████████████ ███ █████████████ ██ ████████████████
█████████████ █ ███████████████████
█████████████ █ ████████████
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Änderungsprotokoll
- v1.0.0: Initial release with basic, always-open, and nested variants
- Full keyboard accessibility
- Stimulus controller for state management
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten