Fazer um spoiler em Javascript, CSS e XHTML

Fevereiro 2017



Para fazer um tipo de spoiler que lhe permitirá exibir e esconder um div no clique, tenho um pequeno script, feito por mim mesmo, que desejo compartilhar com vocês.

Temos dois div :

O primeiro div será exibido nosso texto por padrão com um link, que no clique, exibirá o segundo div.

No segundo div, um link que lhe permitirá esconder este div.


Nós utilizaremos duas funções Javascript, do Css e do XHTML evidentemente.

Antes do nosso primeiro div :


<div id="layer1">
Diversas linguagens de desenvolvimento Web existem : <a href="#" onclick="afficher()" id="layer3">Exibir as linguagens</a>
</div>

Agora criaremos o segundo div que será escondido, por padrão, e que se exibirá com o clique sobre precedente.


<div id="layer2">
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li><a href="#" onclick="fechar()">Esconder</a></li>
</ul>

Passaremos agora ao CSS:


#layer1 {
visibility : visível;
position : relativo;
}

#layer2 {
visibility : hidden;
position : absolute;
}

E a Javascript :


Função exibir() {
document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative';
document.getElementById('layer3').style.visibility='hidden';
}

Função fechar() {
document.getElementById('layer2').style.visibility ='hidden';
document.getElementById('layer2').style.position ='absolute';
document.getElementById('layer3').style.visibility='visible';
}


Espero que isto ajude vocês :)

Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 18 de outubro de 2013 às 08:40 por ninha25.
Este documento, intitulado 'Fazer um spoiler em Javascript, CSS e XHTML', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.