DEV Community

Cover image for Criando um accordion com HTML5 e CSS3
Aline Bezzoco
Aline Bezzoco

Posted on • Edited on

15 1

Criando um accordion com HTML5 e CSS3

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();
});
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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!

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay