viernes, 24 de febrero de 2012

Spoiler para ocultar contenido de una entrada, en blogger



Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Vamos a hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente botón




Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:


  1. <div class="divspoiler">
  2. <input type="button" value="Mostrar" 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 = 'Mostrar'; }" />
  3. </div><div><div class="spoiler" style="display: none;">
  4. Aquí el contenido que queremos ocultar
  5. </div></div>

No hay comentarios:

Publicar un comentario