Um accordion é um componente que permite exibir ou ocultar o conteúdo de forma interativa. Geralmente contém um título e um corpo/conteúdo, e o corpo/conteúdo é exibido ou oculto quando o usuário clicar no título do accordion.

Importância dos accordions em aplicações web

• Tornam a web mais acessível para os usuários.
• São úteis quado precisamos organizar informações em um espaço limitado.
• Permitem que o usuário possa rapidamente verificar os títulos e expandir apenas as seções que lhe interessam, sem ser sobrecarregado por muitas informações na página.
• Ajudam a organizar as informações provendo uma forma de agrupar conteúdos relacionados, melhorando e facilitando a navegação.
• Podem ser estilizados de diversas formas para se adequar à estética da marca e tornar o site mais atraente visualmente.

Tags HTML para criar um accordions

Com HTML5, podemos utilizar as tags <details> e <summary> para criar um accordion. A tag <details> é usada como wrapper para o conteúdo e se expande com o clique do usuário, enquanto a tag <summary> é usada para o título do accordion.

<details>
  <summary>Titulo do accordion</summary>
  <div>
    <p>Conteúdo do accordion</p>
  </div>
</details>

OBS: O conteúdo não necessariamente precisa estar dentro de uma div, mas na grande maioria dos casos utilizamos uma div para agrupar o conteúdo.

O que e como acontece?

Ao clicar no título do accordion (a tag <summary>), o próprio HTML5 se encarrega de expandir o conteúdo adicionando a propriedade open na tag <details>.

Isso significa que você pode utilizar o accordion em sua forma nativa, sem nenhuma manipulação, ou pode utilizar JavaScript para adicionar ou remover a propriedade open do elemento <details>.

Por exemplo, você pode adicionar a propriedade open ao elemento <details> quando o usuário passar o mouse no título do accordion, e remover a propriedade open quando o usuário remover o mouse de cima do elemento. Esse cenário é legal pois o usuário nem precisa clicar para expandir o conteúdo, basta passar o mouse por cima. Mas, claro, vai depender do projeto e de como o design pensou a interação.

Estilização

Assim como qualquer outro elemento HTML, você pode estilizar seu accordion utilizando CSS.

É possível que você vá querer adicionar um estilo diferente para algum elemento do conteúdo quando seu accordion estiver aberto. Para isso, basta lembrar-se da propriedade open e usá-la a seu favor.

details[open] summary {
  color: #323232;
}

Neste exemplo acima, quando o accordion estiver aberto/expandido, o texto do título terá a cor #323232.

Conclusão

Criar um accordion utilizando HTML e CSS é uma tarefa simples e rápida, e pode ser feita sem a necessidade de JavaScript. No entanto, se você deseja adicionar interações mais complexas, como animações, ou se deseja que o accordion funcione de forma diferente do padrão, você pode utilizar JavaScript para manipular o comportamento do accordion.

Espero que este artigo tenha sido útil e que você possa aplicar o conhecimento adquirido em seus projetos. 🚀