JS Component
Accordion Framework
FAQ, listas colapsveis - animao CSS pura com grid-template-rows,
acessibilidade ARIA, single ou multi-open.
1. Bsico (single open)
Y2 e um framework CSS + JS modular, sem dependencias, com
sintaxe semantica PP→XXG.
Inclua o
y2.css e o y2.js. No
precisa de npm, build ou dependências.Sim! O módulo Y2Day alterna entre dark/light salvando no
localStorage e sincronizando entre abas.
2. Multi-open + Plus icon
Múltiplos itens podem ficar abertos ao mesmo tempo com
.is-flu.
Ícone + que vira - ao abrir, com
.is-plus.Sem separadores entre itens quando usamos
.is-flu.
3. Variantes de Cor
Estilo primário.
Estilo sucesso.
Estilo alerta.
Estilo purple.
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2accord |
div | Ativa o componente no container |
y2accord-multi="true" |
div | Permite múltiplos itens abertos simultaneamente |
.acc |
div | Container principal do accordion |
.acc-it |
div | Item individual |
.acc-it.is-act |
div | Inicia o item aberto |
.acc-hdr |
button | Botão/cabeçalho clicável do item |
.acc-bdy |
div | Wrapper da animação (grid-template-rows) |
.acc-bdy-in |
div | Área de conteúdo interno |
.is-flu |
.acc | Fluido - sem bordas entre itens |
.is-sep |
.acc | Separadores visíveis entre itens |
.is-plus |
.acc | Ícone + / - no lugar de > |
.is-pri / .is-suc / .is-ale / .is-per |
.acc | Cor do header ativo |