SWCore
SWCore / CSS / Sanfona nativa (sw-sanfona)

Sanfona nativa (sw-sanfona) CSS

Perguntas frequentes com

: acessível, indexável pelo Google e só uma aberta por vez — zero JS.

O que é

O conteúdo fechado continua no HTML, então o Google e as IAs leem (bom para SEO/GEO e para o schema FAQPage). Dar o mesmo name a vários <details> faz o navegador fechar os outros quando um abre.

Como funciona

<details name=""> é Baseline desde 2024. O sw-sanfona tira o triângulo padrão, põe o "+" que gira e a borda na cor da marca quando aberto.

Exemplos

FAQ — só uma aberta Ao vivo
Quanto tempo leva um site?

De 7 a 15 dias, com textos e fotos prontos.

Funciona no celular?

Sim — todo site nasce pensado para o celular.

Aparece no Google?

Sim, com SEO e dados estruturados desde o primeiro dia.

<details sw-sanfona name="faq" open>
  <summary>Pergunta</summary>
  <p>Resposta</p>
</details>
<details sw-sanfona name="faq">...</details>

Atributos

details[sw-sanfona]
item da sanfona
name="grupo"
só um aberto por grupo
open
começa aberto

Variantes

Nenhum.

Eventos

toggle (no details)
disparado ao abrir/fechar

API (JavaScript)

Nenhum.

Requisitos

  • swcore.min.css 2.1.0

Limitações — o que ele não faz

  • Abrir/fechar não anima a altura (animar até height:auto ainda não está nos 4 navegadores).
← AnteriorDica ancorada (sw-dica) Próximo →Carrossel de arrastar (sw-trilho)