25 mar 2013

Mostrar y ocultar partes de una entrada con un spoiler

Escrito por | Categorías: ,
Hoy veremos cómo mostrar y ocultar partes de una entrada usando un spoiler. Este truco es ideal para que la publicación no se haga muy larga, para mantener el orden en el post y también para revelar cierto contenido de la entrada únicamente cuando el lector quiera.

Para usar este spoiler sólo hace falta pegar este código:
<div><a href='#' onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.innerHTML = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = 'Mostrar';}return false" type="button">Mostrar</a><div style="display: none;">Contenido a ocultar</div></div>
Un ejemplo funcionando:

Mostrar
Ocultando contenido con un spoiler.

También se puede hacerlo en forma de botón, basta con usar este código:
<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar';}" type="button" /><div style="display: none;">Contenido a ocultar</div></div>
Aquí se ve una demostración:


Ahora lo estoy haciendo pero con forma de botón.

Es algo fácil de implementar y usar y puede sernos útil en algunas ocasiones.