Tweet

Mostrar e ocultar conteúdo com os elementos details e summary em HTML

Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML.

Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez.

O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner.

Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido.

Vejamos um exemplo de como usar esses elementos em HTML:

<details>
  <summary>Clique aqui para expandir o conteúdo</summary>
    <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p>
</details>

No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido:

Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado:

Podemos adicionar mais conteúdo dentro do elemento details, incluindo outros elementos HTML como cabeçalhos, listas ou imagens. Vejamos um exemplo de uso mais complexo desses elementos:

<details>
  <summary>Exibir lista de livros</summary>
    <h2>Livros</h2>
    <ul>
      <li>Cosmos</li>
      <li>Contato</li>
      <li>Pálido Ponto Azul</li>
      <li>Murmúrios da Terra</li>
    </ul>
    <img src="http://www.bosontreinamentos.com.br/wp-content/uploads/2023/02/cosmos-livro.jpg" alt="Imagem de exemplo">
</details>

Neste exemplo, há um cabeçalho de seção, uma lista e uma imagem dentro do elemento details. Quando o usuário clicar no elemento summary, todo esse conteúdo será expandido ou recolhido. A imagem a seguir mostra o conteúdo desse exemplo expandido:

Também podemos empregar CSS para estilizar os elementos details e summary, como por exemplo para alterar o tamanho da fonte, cor do texto ou cor de fundo. Abaixo temos um exemplo de como estilizar ambos os elementos:

<style>
  details {
    width: 250px;
    height: 250px;
  }
  summary {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
  }
</style>

Neste exemplo, o elemento summary terá uma cor de fundo cinza e cantos arredondados, e o elemento details tem seu tamanho delimitado em 250 pixels:

No geral, os elementos details e summary são uma forma simples e eficaz de criar um bloco colapsável no estilo sanfona em HTML. Eles podem ajudar a tornar o site mais fácil de usar e organizado, permitindo que os usuários se concentrem em um conteúdo específico por vez.