Como criar um acordeão usando somente HTML

└─ 📂 Desenvolvimento web · July 11, 2020 · 2 minute read


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.


Meet the writer

Anna e só is a documentarian who loves learning new things every day—and sometimes, if they are lucky, they learn something that may be useful for someone else. They are determined to put an end to the tragedy of Undocumented Issues, Unhelpful Answers, and Untranslated Content. ⌨️