Spoiler para mostrar y ocultar contenido

diciembre 19, 2013

¿Nunca les ha sucedido que tienen un exceso de contenido y desean ocultarlo?, pues a mi sí, suele sucederme para tener una estética mucho mejor en las entradas
Este es un ejemplo

Pueden incluir cualquier cosa que deseen, desde imágenes, vídeos, imágenes, etc
Este es el código:


<div class="divspoiler">

<input type="button" value="Ver más" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Ver más'; }" />

</div><div><div class="spoiler" style="display: none;">

Acá colocan el contenido que desean ocultar

</div></div>

También pueden utilizar una imagen en vez del típico botón
Ejemplo:

Al igual que el anterior ejemplo, se puede incluir cualquier contenido que se desee ocultar
Código a utilizar:


<div class="divspoiler">

<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />

</div><div><div class="spoiler" style="display: none;">

Acá el contenido a ocultar

</div></div>

Esto es todo, espero les resulten útiles estos códigos.