Acordeón
Secciones de contenido expandibles para organizar información. Disponible en variantes básica (una abierta), siempre abierta (múltiples) y anidada.
Básico
Solo un elemento puede estar abierto a la vez
_accordion.html.erb
███
█████████ █████████ █ █████ █████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
█ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
██████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ ████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
██████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ████ ████████████████
█████████████ █ ████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Siempre abierto
Varios elementos pueden estar abiertos simultáneamente
_accordion.html.erb
███
█████████ █████████ █ ██████ ████ █████████
████████ █████ ███ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ ██
█ ██████ ████████ ███ ████████ ████████ ███ ███████ ██ █
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████████ ██████ ██████████
█
███ ████████████████████████ ███ ████████████████
█████████████ █ ███████████████████
██████████████ █ █████████████████████ ██ ██
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Anidado
Acordeón dentro de acordeón para contenido jerárquico
_accordion.html.erb
███
█████████ █████████ █ ██████ █████████
█████████ ██████ █████████ ███ ████████████ ████████
████ █████████████ ████ ██ █████ ██████ ███ █████ ██ ██ ████ ███████████████
██████
███ ██████ ███████████████████████ ██████ █
█
██████ ███████ ███████ ███
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
accordion_component.html.erb
████ ██████████ █████████████████ ███
███████████████████████████
███████████████████████████████████████
██ █████████████████████ ██ ██████ ██████ ██
██ ███████ █ █████████████████ ██
█████
███████ █████████████
██████████ ████████████████████ ███
███████████████████████████████
████████████████████████████████████ ███████████████████████████
accordion_component.rb
█ ██████████████████████ ████
█████ █████████████████████████████████████ █ ███████████████████
████████████ ███████ ██████████ ██████████ █
███████████████████████████████████████████ ██████ █████████████ ██████████████ ██████████
█
███ ████████████████████████ ███ █████████████ ██ ████████████████
█████████████ █ ███████████████████
█████████████ █ ████████████
accordion_controller.js
██████ █ ██████████ █ ████ ████████████████████
██ ████████ ██ ███████████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ██████████ ███████
██████ ██████ █ █
██████████ █ █████ ████████ ████████ ████ █
█
█████████████ █
Registro de Cambios
- v1.0.0: Initial release with basic, always-open, and nested variants
- Full keyboard accessibility
- Stimulus controller for state management
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso