Accordion
O @accordion renderiza uma lista de itens expansíveis, ideal para FAQs e seções de perguntas e respostas.
Uso básico
```seed
@accordion
@title
Perguntas Frequentes
@item
@title
O que é o Seed?
Seed é uma linguagem de markup que compila para HTML.
@item
@title
É gratuito?
Sim, o Seed é open source e gratuito.
@item
@title
Preciso de JavaScript?
Não para a renderização. O seed.js mínimo incluso cuida da interatividade.
```
Slots do @accordion
| Slot | Tag gerada | Descrição |
|---|---|---|
@title | <h2> | Título do accordion (opcional). Omitido se não preenchido. |
@item (múltiplos) | <details> | Itens expansíveis |
Slots do @item
| Slot | Tag gerada | Descrição |
|---|---|---|
@title | <summary> | Cabeçalho clicável do item |
| (conteúdo) | <div> interno | Conteúdo expandido (aceita markdown) |
Sem título no accordion
O @title no accordion pai é opcional. Quando omitido, o <h2> não aparece no HTML:
```seed
@accordion
@item
@title
Pergunta 1
Resposta aqui.
@item
@title
Pergunta 2
Outra resposta.
```
Variante bordered
Adiciona borda, cantos arredondados e overflow-hidden ao item:
```seed
@accordion
@item variant=bordered
@title
Item com borda
Conteúdo com visual de card.
@item
@title
Item sem borda
Conteúdo padrão.
```
Comportamento
O accordion usa o elemento HTML nativo <details> / <summary>, que é acessível por padrão e funciona sem JavaScript. O seed.js adiciona animação suave ao chevron indicador.
💡
Por usar <details>, o accordion funciona mesmo com JavaScript desabilitado. A animação do chevron é progressiva.