Accordion [sw-accordion]
Conteúdo expansível com animação de altura real (não max-height fixo) e suporte a múltiplos abertos.
1. Padrão (um aberto por vez)
O que é o SW Framework?
Um design system CSS + JS sem dependências, feito pra ser usado direto via atributos HTML.
Preciso de build para usar?
Não — basta incluir o CSS e JS compilados. O build só é necessário pra quem contribui com o framework.
2. Múltiplos abertos
Item A
Conteúdo A.
Item B
Conteúdo B — pode abrir junto com o A.
3. Flush (estilo FAQ minimal)
Com .is-flush, sem cantos nem caixa — só uma linha fina separando as perguntas.
Como faço o build do projeto?
Rode
node build.js na raiz do framework.Onde ficam os arquivos compilados?
Em
dist/, espelhados em docs/dist/ para as páginas de documentação.Posso usar sem o build?
Sim, basta incluir os arquivos já compilados em
dist/.4. Plus/× e com ícones no título .is-plus
Com .is-plus, o indicador vira um + que gira até formar um × ao abrir. Use .sw-acc-hdr-ttl pra colocar um ícone antes do título.
Segurança dos dados
Nenhum dado é enviado a servidores externos — tudo roda no seu próprio ambiente.
Cobrança
O framework é gratuito e sem dependências pagas.
5. Card (elevado) .is-card
Com .is-card, os itens ganham sombra, mais espaço entre si e uma borda de destaque na lateral quando ativos.
Plano Básico
Ideal pra quem está começando — recursos essenciais.
Plano Pro
Todos os recursos, com suporte prioritário.
Referência
| Atributo/Classe | Descrição |
|---|---|
[sw-accordion] | Container raiz. |
sw-accordion-multi="true" | Permite múltiplos itens abertos simultaneamente. |
.sw-acc-it | Cada item — adicione .is-act pra começar aberto. |
.sw-acc-hdr | Cabeçalho clicável (toggle). |
.sw-acc-bdy / .sw-acc-bdy-in | Wrapper animado + conteúdo interno (padding fica no interno). |
.sw-acc-hdr-ttl | Envolve título + ícone opcional dentro do cabeçalho. |
.is-flush | Sem caixa/cantos — só linha divisória (estilo FAQ). |
.is-plus | Indicador + que gira até formar ×. |
.is-card | Itens com sombra, mais espaço e borda de destaque quando ativos. |
sw:accordion:open / sw:accordion:close | Eventos disparados no item. |
SW.Accordion.open(container, index) | API — abre um item programaticamente. |