Muitas são as necessidades em determinados projetos que faz com que alguns programadores “travem” durante o desenvolvimento e isso é muito normal.
Assumimos que não é nada fácil memorizar todos os códigos que uma linguagem oferece, e na verdade, também nem é preciso, pois pra isso servem as bibliotecas e documentações!
Hoje vamos compartilher com você uma maneira simples e esteticamente muito perfeita para exibir ou ocultar determinados elementos utilizando a tag details do HTML.
Veja no botão abaixo do que estamos falando, ah e se prepara porque essa dica é top!
Clique aqui para mostrar o conteúdo
Viu só que legal? Agora, clique novamente no título para ocultar o conteúdo.
Código HTML para exibir/ocultar elemento
No exemplo acima fizemos um código simples, apenas com uma span e um parágrafo. Porém, você pode utilizar qualquer classe ou elemento em HTML e CSS dentro da tag details e deixar seu projeto ainda mais profissional.
Veja o código que utilizamos:
<details>
<summary>
<span><strong>Clique aqui para mostrar o conteúdo</strong></span>
</summary>
<p>Viu só que legal? Agora, clique novamente no título para ocultar o conteúdo.</p>
</details>
Você também pode inserir vídeos, imagens, botões e qualquer outro elemento do html, desde que esteja dentro da tag details.
Quer mais informações sobre a tag details do html? Recomendamos a página oficial de documentação da W3Schools.
Tag details pra quem usa Elementor (WordPress)
Por padrão, o Elementor disponibiliza a função Tabs, que tem o mesmo resultado final da tag details do html. Porém, em alguns casos talvez específicos fica um pouco limitado utilizar a função tabs do Elementor, sendo necessário ajustes que seriam facilmente inclusos através do código html.
Experimente inserir o código html da tag details que compartilhamos acima, utilizando o elemento HTML do Elementor.
Conclusão
Muitos criticam o html mas poucos se interessam em aprender as funcionalidades da linguagem.
Aqui na Agência ISSO Marketing trabalhamos o dia todo criando sites com html, alimentando nossa experiência e proporcionando pra você conteúdo gratuito e de qualidade.
Comente aqui com a gente. Você já conhecia a função details do html para ocultar ou exibir conteúdos específicos?
