Crear un spoiler en Javascript, CSS y XHTML

Octubre 2017


Crear un spoiler (mostrar/ocultar efecto) en Javascript, CSS y XHTML



A continuación te dejamos un script para crear un spoiler en Javascript, que te permite mostrar u ocultar un div con un clic encima.

Usaremos dos div:
  • El primero mostrará nuestro texto con un enlace, que con un clic, mostrará un segundo div.
  • El segundo div contiene un enlace. Este enlace te permite ocultar este div.

Usaremos dos funciones JavaScript, CSS y XHTML.

En nuestro primer div:

<div id="layer1">      
Plusieurs langages de développement Web existent : <a href="#" onclick="afficher()" id="layer3">Afficher les langages</a>
</div>
Creamos el segundo div. Este div es ocultado y sólo será mostrado haciendo clic en el primero:
<div id="layer2">      
<ul>
<li>XHTML</li>
<li>CSS</li>
<li>PHP</li>
<li><a href="#" onclick="fermer()">Cacher</a></li>
</ul>

Ahora pasamos a la parte CSS:

#layer1 {     
visibility : visible;
position : relative;
}

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

El JavaScript:

function afficher() {  
document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative';
document.getElementById('layer3').style.visibility='hidden';
}

function fermer() {
document.getElementById('layer2').style.visibility ='hidden';
document.getElementById('layer2').style.position ='absolute';
document.getElementById('layer3').style.visibility='visible';
}

Artículo original escrito por jak58. Traducido por Carlos-vialfa. Última actualización: 21 de marzo de 2014 a las 00:00 por Carlos-vialfa.
El documento «Crear un spoiler en Javascript, CSS y XHTML» se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo libremente. No olvides citar a CCM (es.ccm.net) como tu fuente de información.