Criando um accordion com HTML5 e CSS3

이미지 신용: Colorib

Eu lembro que há um bom tempo atrás quando precisava implementationar aquelas páginas de FAQ (perguntas e respostas) semper tinha que criar um accordion (ou collapsible, o que preferir). jQuery, algo mais ou menos assim:

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

Com o codigo 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 so 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 fazer dia conseem JS é o nosso 아코디언. 마스 코모?

O HTML5 possui duas 태그 chamadas<details> esummary . O Primeiro는 캡슐화된 O<summary>와 위젯을 제공합니다. 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 codigo acima para cada título/descrição eu adicionei um novo <details> e <summary> para que cada um possa funcionar corretamente. 아심:

<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. 유사 등급::-webkit-details-marker e adicionando umdisplay: none para que o mesmo desapareça.

E para adicionar um novo caractere especial de +/- quando abre e fecha (respectivamente) 활용 a pseudo-classe :before (porque eu quero que o sinal apareça antes do meu texto) e a variante [open] comada com 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 codigo.

Por hoje é só, pessoal :) Espero que tenham gostado do artigo. 근접 촬영!