Desenvolvimento web · Jul 11, 2020 · 2 minute read

Como criar um acordeão usando somente HTML



Como eu descobri isso?

Recentemente eu incluí no tema que uso em meus dois blogs um pequeno elemento que exibe o índice de cada postagem publicada. O código incluído nada mais é do que uma caixa de seleção que, ao ser clicada ou tocada pelo usuário, exibe uma lista de todos os cabeçalhos principais do texto. Considerando experiências anteriores observando o código de outras pessoas, eu acreditava que esse tipo de elemento só poderia ser criado através de um artifício como o que eu usei ou ao usar Javascript (o que tendo a evitar para respeitar os hábitos de navegação de pessoas que ativamente bloqueiam a execução desse tipo de script). Mas uma postagem no fediverso de @cypnk@mastodon.social mencionando a tag acabou chamando a minha atenção:

FYI You can nest <details> tags within <ul> and vice versa to create a collapsible tree menu without JS or CSS
E.G.
<details>
  <summary>Root</summary>
  <ul>
     <li>
        <details>
           <summary>Sub</summary>
           <ul><li>etc...</li></ul>
        </details>
     </li>
  </ul>
</details>

Conferindo a documentação sobre o elemento no MDN, eu me surpreendi com como quase todos os navegadores mais usados oferecem suporte à funcionalidade.

Limitações

Digo quase porque infelizmente o Internet Explorer não oferece suporte a esse elemento. Segundo um comentário em uma postagem do CSS Tricks sobre o assunto, esse elemento aparecerá como inline no navegador, “posicionado desajeitadamente em um parágrafo único”. A pessoa ainda acrescenta que adicionar display: block às tags <summary> e <details> em seu CSS fará com que elas sejam exibidas uma em cima da outra, como se esperaria para manter o mínimo de sua organização original.