Fazer um spoiler em Javascript, CSS e XHTML

Faça uma pergunta


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 :)
Jean-François Pillou

Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net e diretor digital do Grupo Figaro. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.

Mais informações sobre a equipe do CCM

Veja também