Sanfona nativa (sw-sanfona) CSS

O que é

É a lista de "Perguntas frequentes" do site: a pessoa toca na pergunta e a resposta aparece embaixo; toca de novo e fecha. Você escreve cada item com a tag <details> do próprio HTML e coloca sw-sanfona nela. Se der o mesmo name a vários itens, o navegador deixa só um aberto por vez.

É só CSS por cima de um recurso que todo navegador já tem. O SW Core tira o triângulo padrão, coloca um "+" na cor do site que gira e vira "×" quando abre, e pinta a borda do item aberto. Como a resposta continua escrita no HTML (só fica escondida), o Google e as IAs conseguem ler tudo — ótimo para aparecer nas buscas.

Quando usar

• Perguntas frequentes (FAQ) na página de serviço ou de vendas — o uso principal.
• Detalhes de produto em loja: "Descrição", "Medidas", "Entrega e troca".
• Textos longos que pouca gente lê: política de privacidade, regulamento, termos.
• Precisa de estilos diferentes (cartões soltos, sem moldura, ícone de seta) ou de abrir por JavaScript? Use o Accordion. A sanfona é a versão mais leve.

Comece aqui

1. 1

   Coloque o SW Core no <head>. A sanfona é só CSS: não precisa do arquivo de JavaScript.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Cada pergunta é um <details sw-sanfona>. A pergunta vai no <summary> e a resposta logo abaixo. Mesmo name em todos = só um aberto por vez.

   Quanto tempo leva para ficar pronto?

   De 7 a 15 dias, com textos e fotos em mãos.

   Funciona no celular?

   Sim, todo site nasce pensado primeiro para o celular.

   <details sw-sanfona name="faq" open>
     <summary>Quanto tempo leva para ficar pronto?</summary>
     <p>De 7 a 15 dias, com textos e fotos em mãos.</p>
   </details>
   <details sw-sanfona name="faq">
     <summary>Funciona no celular?</summary>
     <p>Sim, todo site nasce pensado primeiro para o celular.</p>
   </details>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section>
  <h2>Perguntas frequentes</h2>
  <details sw-sanfona name="faq" open>
    <summary>Quanto custa um site?</summary>
    <p>Sites institucionais a partir de R$ 1.200, em até 12x.</p>
  </details>
  <details sw-sanfona name="faq">
    <summary>Vocês fazem a hospedagem?</summary>
    <p>Sim. O primeiro ano de hospedagem já vem incluso.</p>
  </details>
</section>

<!-- mesmas perguntas em formato que o Google e as IAs entendem -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "Quanto custa um site?",
      "acceptedAnswer": { "@type": "Answer", "text": "Sites institucionais a partir de R$ 1.200, em até 12x." } },
    { "@type": "Question", "name": "Vocês fazem a hospedagem?",
      "acceptedAnswer": { "@type": "Answer", "text": "Sim. O primeiro ano de hospedagem já vem incluso." } }
  ]
}
</script>

<details sw-sanfona name="produto" open>
  <summary>Descrição</summary>
  <p>Camiseta 100% algodão, fio 30.1, costura reforçada.</p>
</details>
<details sw-sanfona name="produto">
  <summary>Medidas</summary>
  <ul>
    <li>P — 50 × 70 cm</li>
    <li>M — 53 × 72 cm</li>
    <li>G — 56 × 74 cm</li>
  </ul>
</details>
<details sw-sanfona name="produto">
  <summary>Entrega e troca</summary>
  <p>Envio em 24h. Primeira troca grátis em até 30 dias.</p>
</details>

<details sw-sanfona>
  <summary><span class="flx alc gap-2"><i class="swi-filter"></i> Filtrar pedidos</span></summary>
  <div class="flx f-wr gap-3">
    <label sw-chk><input type="checkbox" checked> Pagos</label>
    <label sw-chk><input type="checkbox"> Aguardando</label>
    <label sw-chk><input type="checkbox"> Cancelados</label>
  </div>
</details>

<details sw-sanfona id="garantia">
  <summary>Qual o prazo de garantia?</summary>
  <p>12 meses contra defeito de fabricação.</p>
</details>

<script>
  document.getElementById('garantia').addEventListener('toggle', (e) => {
    if (e.newState === 'open') {
      console.log('abriu a pergunta da garantia');
    }
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css — o visual.
• swcore.compl.min.css — só se usar ícone swi-* no título.

Cuidados — erros comuns

• sw-sanfona só funciona na tag <details>. Numa <div> não acontece nada.
• O <summary> tem que ser o primeiro filho do details, senão o navegador cria um "Detalhes" automático.
• Dois grupos diferentes na mesma página precisam de name diferente — senão abrir um item de um grupo fecha o do outro.
• Com name igual, deixe no máximo um item com open.
• Ponha no summary só o título. Botão ou link dentro do summary fica difícil de clicar sem abrir/fechar junto.

O que ele não faz

• Abrir e fechar não anima a altura (o conteúdo aparece de uma vez). Para abertura suave, use o Accordion.
• Tem um visual só (borda + "+"). Variações como cartões soltos ou sem moldura ficam no Accordion.