Details e summary

details e summary criam um painel que abre e fecha sem JavaScript. No Belavista servem para FAQ da oficina, rodapé de créditos longos e sumários “nesta página” em tela estreita.

O exemplo deste capítulo é 19-details-e-summary, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira. Use Tab e Enter no summary.

O que você vai aprender

• Montar um disclosure com details/summary.
• Usar o atributo open.
• Empilhar vários details (acordeão simples / FAQ).
• Saber quando preferir dialog (próximo capítulo).
• Evitar esconder informação crítica só em details fechado.

Estrutura

<details>
  <summary>Quais materiais levar?</summary>
  <p>Avental, caderno e curiosidade. Materiais de impressão ficam no ateliê (lista fictícia).</p>
</details>

O summary é o controle visível. O restante é o conteúdo revelado. Clique ou tecla no summary alterna o estado. Não troque o summary por um div clicável.

open

<details open> começa expandido. Útil quando a resposta mais importante deve aparecer primeiro. Sem open, o painel nasce fechado.

FAQ em série

Vários details seguidos formam um FAQ. Por padrão cada um abre de forma independente (não fecha o anterior). Acordeão “só um aberto” pediria script — fora do foco mínimo deste capítulo.

<details>
  <summary>Quanto custa a oficina?</summary>
  <p>Valores fictícios: consulte a tabela do capítulo 11.</p>
</details>
<details>
  <summary>Preciso de experiência?</summary>
  <p>Não. As turmas introdutórias partem do zero (ficção didática).</p>
</details>

Acessibilidade e conteúdo

O padrão nativo já traz teclado e semântica de disclosure. Evite colocar a única informação essencial da página só dentro de um details fechado na carga — a pessoa pode não abrir.

Erro comum: esquecer summary (comportamento inconsistente) ou aninhar details demais até confundir. Outro: usar details para navegação principal — nav com links é mais claro.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Details e summary — Belavista</title>
  </head>
  <body>
    <main>
      <h1>Perguntas sobre as oficinas</h1>
      <details open>
        <summary>Onde fica o Laboratório Belavista?</summary>
        <p>Endereço fictício na Rua da Aurora, Recife.</p>
      </details>
      <details>
        <summary>Posso levar crianças?</summary>
        <p>Turmas teen fictícias aos sábados; demais turmas a partir de 16 anos (demo).</p>
      </details>
      <details>
        <summary>Como chegar de ônibus?</summary>
        <p>Linhas fictícias que passam no cais. Prefira transporte real da sua cidade ao visitar ateliês de verdade.</p>
      </details>
      <details>
        <summary>Preciso levar papel?</summary>
        <p>Não. O ateliê fornece o papel das provas (resposta fictícia).</p>
      </details>
      <section aria-labelledby="creditos">
        <h2 id="creditos">Créditos longos</h2>
        <details>
          <summary>Ver créditos tipográficos</summary>
          <p>Tipos citados neste exemplo são nomes fictícios do curso WebDev Full.</p>
        </details>
      </section>
    </main>
  </body>
</html>

Remova o open do primeiro bloco e preveja o estado inicial ao recarregar.

Details versus dialog

details revela conteúdo no fluxo da página. dialog (capítulo 20) interrompe com modal ou janela sobreposta. Escolha conforme a interação: FAQ → details; confirmação bloqueante → dialog.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. O que o atributo open controla?
2. Por que summary é obrigatório na prática didática?
3. Quando details é má escolha?

Respostas comentadas

1. Se o painel começa expandido (open presente) ou recolhido (ausente).
2. Porque é o rótulo/controle nativo do disclosure; sem ele a experiência fica ambígua.
3. Quando a informação precisa estar sempre visível, ou quando a interação exige modal com foco preso — aí avalie dialog.