Seguro que muchas veces hemos necesitado poner un texto oculto para el lector: bien porque estemos contando un argumento de la última película que hemos visto o bien porque simplemente, queremos que ese texto no esté tan a la vista y sólo lo consulte quien esté interesado. En este post voy a explicar una sencilla manera de hacerlo.



En este caso no necesitas tocar nada del código HTML de la plantilla de la página. Tan sólo deberás insertar un código en la entrada, desde Edición de HTML:

<div class="divspoiler">
<a href="javascript:void(0);" 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';}" >Mostrar / Ocultar &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Texto o imagen que queremos ocultar
</div></div>

Quedaría de la siguiente manera:

Es muy importante que recuerdes una cosa: cuando insertes el código desde Edición de HTML te recomiendo no volver a la pestaña "redactar" porque puedes perder información y que no salga bien. Por ello, sugiero que escribas el post completo y dejes para lo último insertar los textos ocultos.

De esta manera, podrás jugar con el diseño de tus post y desvelar sólo, la información que quieres. Estos trucos suelen usarse mucho en blog o foros sobre cine o literatura, donde no queremos fastidiar a los usuarios los detalles que querían ver.

Vía CiudadBlogger