Créditos da imagem de capa: Colorib

Eu lembro que há um bom tempo atrás quando precisava implementar aquelas páginas de FAQ (perguntas e respostas) sempre tinha que criar um accordion (ou collapsible, o que preferir). E quando eu fazia o código já tinha até o script pronto em jQuery, algo mais ou menos assim:

$('.title').click(function(){
 $(this).parent().find('.description').slideToggle();
});

Com o código acima eu praticamente tinha o funcionamento padrão do meu accordion. A questão é que com o tempo as coisas foram mudando e o jQuery foi entrando em desuso por boa parte das pessoas desenvolvedoras para realizar as coisas tudo de forma mais nativa com o Javascript ou Vanilla JS. Não só isso, mas com a vinda do HTML5 e CSS3 muitos dos widgets que antes fazíamos com JS ou jQuery (quem lembra do jQuery UI?) agora daria para fazer apenas com as duas linguagens acima e um dos que hoje em dia conseguimos fazer sem JS é o nosso accordion. Mas como?

O HTML5 possui duas tags chamadas <details> e summary. O primeiro serve para encapsular o <summary> e também para criarmos o widget. Já o segundo serve para definirmos o título clicável do accordion (que abre e fecha). E como fazemos isso? É o que vou mostrar agora no exemplo abaixo :)

Se você reparar no código acima para cada título/descrição eu adicionei um novo <details> e <summary> para que cada um possa funcionar corretamente. Assim:

<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details> 

<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details> 

Por padrão o <summary> exibe um caractere especial diferente do exemplo acima. Para customizar precisei desabilitá-lo utilizando a pseudo-classe ::-webkit-details-marker e adicionando um display: none para que o mesmo desapareça.

E para adicionar um novo caractere especial de +/- quando abre e fecha (respectivamente) utilizei a pseudo-classe :before (porque eu quero que o sinal apareça antes do meu texto) e a variante [open] que é utilizada junto com o details que permite que a gente faça uma customização do accordion quando o mesmo tiver aberto.

Como vocês podem ver com apenas HTML5 e CSS3 conseguimos criar um accordion funcional e com poucas linhas de código.

Por hoje é só, pessoal :) Espero que tenham gostado do artigo. Até a próxima!