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.
Y s?, ya antes hab?amos visto c?mo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de 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.
Y s?, ya antes hab?amos visto c?mo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de 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.
Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.
Para usarlo en tu blog s?lo basta con poner este c?digo en una entrada cada vez que lo quieras usar:
<div class="divspoiler">
<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'; }" />
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>
Ah? s?lo tienes que agregar donde se indica el contenido que quieres ocultar. Si el bot?n no te gusta mucho puedes leer esta entrada para saber c?mo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un bot?n
En ese caso el c?digo a usar es este:
<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 ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>
O si lo prefieres tambi�n puedes usar una imagen.
Ah? el c?digo ser?a este:
<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;">
Aqu? el contenido que queremos ocultar
</div></div>
Bastante pr?ctico y f?cil de usar ?no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. S?lo procura no cambiar a la pesta?a Redactar una vez que lo pongas y no modifiques los espacios del c?digo para que funcione correctamente.
No comments:
Post a Comment