Accordion Componentes

O que é

É o bloco de "Perguntas frequentes", "Detalhes do produto" ou "Módulos do curso": a pessoa clica no título e o conteúdo desliza para baixo; clica de novo e ele recolhe. Por padrão, abrir um fecha o outro. Você monta a estrutura com atributos (sw-accordion, sw-acc-it, sw-acc-hdr, sw-acc-bdy) e escolhe o visual escrevendo palavras dentro do sw-accordion: sw-accordion="split plus".

O JavaScript do SWCore mede a altura real do conteúdo e anima até ela, então a abertura é sempre suave, com texto curto ou longo. Ele também deixa o título acessível: dá para abrir com Tab + Enter (ou espaço) e o leitor de tela sabe se está aberto ou fechado. Funciona no tema claro e no escuro.

Quando usar

• Perguntas frequentes com abertura animada.
• Detalhes de produto ("Descrição", "Medidas", "Entrega").
• Conteúdo de curso ou cardápio por seções, com vários abertos ao mesmo tempo (multi).
• Painel administrativo: grupos de configurações que recolhem (card).
• Quer algo sem JavaScript? A Sanfona (sw-sanfona) é a versão só HTML/CSS.

Comece aqui

1. 1

   Coloque o SWCore: o CSS no <head> e o JavaScript no fim do <body> (é ele que abre e fecha).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Monte a estrutura: o grupo (sw-accordion), cada item (sw-acc-it) com título (sw-acc-hdr) e corpo (sw-acc-bdy + sw-acc-bdy-in). class="is-act" = começa aberto.

   Quanto tempo leva para o site ficar pronto?

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

   Vocês fazem a hospedagem?

   Sim. O primeiro ano já vem incluso no pacote.

   Posso mexer no site depois?

   Pode. Você recebe um painel para trocar textos e fotos.

   <div sw-accordion>
     <div sw-acc-it class="is-act">
       <div sw-acc-hdr>Quanto tempo leva para o site ficar pronto?</div>
       <div sw-acc-bdy><div sw-acc-bdy-in>De 7 a 15 dias, com textos e fotos em mãos.</div></div>
     </div>
     <div sw-acc-it>
       <div sw-acc-hdr>Vocês fazem a hospedagem?</div>
       <div sw-acc-bdy><div sw-acc-bdy-in>Sim. O primeiro ano já vem incluso no pacote.</div></div>
     </div>
     <div sw-acc-it>
       <div sw-acc-hdr>Posso mexer no site depois?</div>
       <div sw-acc-bdy><div sw-acc-bdy-in>Pode. Você recebe um painel para trocar textos e fotos.</div></div>
     </div>
   </div>

3. 3

   Para mudar o visual, escreva palavras no sw-accordion. Aqui: cartões soltos com o ícone "+".

   Quanto tempo leva para o site ficar pronto?

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

   Vocês fazem a hospedagem?

   Sim. O primeiro ano já vem incluso no pacote.

   Posso mexer no site depois?

   Pode. Você recebe um painel para trocar textos e fotos.

   <div sw-accordion="split plus">
     ...os mesmos itens...
   </div>

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.

<div sw-accordion="flush plus">
  <div sw-acc-it class="is-act">
    <div sw-acc-hdr>Tem garantia?</div>
    <div sw-acc-bdy><div sw-acc-bdy-in>Sim: 7 dias para pedir o dinheiro de volta, sem perguntas.</div></div>
  </div>
  <div sw-acc-it>
    <div sw-acc-hdr>Como recebo o acesso?</div>
    <div sw-acc-bdy><div sw-acc-bdy-in>Por e-mail, logo depois que o pagamento é aprovado.</div></div>
  </div>
  <div sw-acc-it>
    <div sw-acc-hdr>Posso parcelar?</div>
    <div sw-acc-bdy><div sw-acc-bdy-in>Em até 12x no cartão.</div></div>
  </div>
</div>

<div sw-accordion="split multi">
  <div sw-acc-it class="is-act">
    <div sw-acc-hdr><span sw-acc-hdr-ttl><i class="swi swi-play-circle"></i> Módulo 1 — Primeiros passos</span></div>
    <div sw-acc-bdy><div sw-acc-bdy-in>
      <ul>
        <li>Aula 1 — Boas-vindas (4 min)</li>
        <li>Aula 2 — Configurando tudo (12 min)</li>
      </ul>
    </div></div>
  </div>
  <div sw-acc-it>
    <div sw-acc-hdr><span sw-acc-hdr-ttl><i class="swi swi-play-circle"></i> Módulo 2 — Vendendo mais</span></div>
    <div sw-acc-bdy><div sw-acc-bdy-in>
      <ul>
        <li>Aula 3 — Anúncios que convertem (18 min)</li>
        <li>Aula 4 — WhatsApp de vendas (15 min)</li>
      </ul>
    </div></div>
  </div>
</div>

<div sw-accordion="card plus">
  <div sw-acc-it class="is-act">
    <div sw-acc-hdr><span sw-acc-hdr-ttl><i class="swi swi-store"></i> Dados da loja</span></div>
    <div sw-acc-bdy><div sw-acc-bdy-in>
      <div sw-fld><label for="rc-acc-nome">Nome da loja</label><input sw-inp id="rc-acc-nome" value="Doces da Bia"></div>
    </div></div>
  </div>
  <div sw-acc-it>
    <div sw-acc-hdr><span sw-acc-hdr-ttl><i class="swi swi-bell"></i> Avisos</span></div>
    <div sw-acc-bdy><div sw-acc-bdy-in>
      <label sw-chk><input type="checkbox" checked> Avisar por e-mail a cada pedido</label>
    </div></div>
  </div>
</div>

<button type="button" sw-btn="out p" id="ver-trocas">Ver trocas</button>

<div sw-accordion="split" id="detalhes">
  <div sw-acc-it class="is-act">…Descrição…</div>
  <div sw-acc-it>…Entrega…</div>
  <div sw-acc-it>…Trocas…</div>
</div>

<script>
  document.getElementById('ver-trocas').addEventListener('click', () => {
    SW.Accordion.open('#detalhes', 2);   // 0 = primeiro item, 2 = terceiro
  });

  // saber quando alguém abre um item
  document.getElementById('detalhes').addEventListener('sw:accordion:open', (e) => {
    console.log('abriu:', e.detail.item.querySelector('[sw-acc-hdr]').textContent);
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

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

Cuidados — erros comuns

• Esquecer o sw-acc-bdy-in dentro do sw-acc-bdy: abre, mas o texto fica colado nas bordas.
• Para começar aberto, a classe is-act vai no sw-acc-it (o item), não no título.
• Duas palavras de visual juntas (split card) se atropelam. Escolha um visual + as opções plus/multi.
• Conteúdo que muda de altura depois de aberto (imagem carregando, por exemplo) funciona: depois de abrir, a altura fica livre.

O que ele não faz

• Não tem SW.Accordion.close(): para fechar por código, dispare um clique no título (item.querySelector('[sw-acc-hdr]').click()).
• Não guarda qual item estava aberto quando a página recarrega.