Fazer um spoiler em Javascript, CSS e XHTML
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
- Fazer um spoiler em Javascript, CSS e XHTML
- Desativar javascript chrome - Dicas -Chrome
- Remover sublinhado link css - Dicas -HTML
- Como desativar o javascript no celular - Dicas -Android
- Como posicionar uma imagem em css - Dicas - CSS
- Baixar javascript - Downloads - Javascript
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.
Assine nossa newsletter!
