Spoiler para ocultar y mostrar contenido en una entrada

, 2 comentarios
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.

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 &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

2 comentarios :

  1. Unknown21 de agosto de 2016, 3:23:00 a.m. GMT-3

    Amigo no logro hacer que me funcione lo pongo en las entradas y pongos desde texto hasta imagenes y videos y aun que el boton me parece le doy click y no pasa nada... no despliega nada ni muestra nada, sabes a que se deba este fallo? (ya he probado con varios codigos y sigo sin poder).

    ResponderBorrar

Antes de comentar recuerda:
⇢ No se permite el uso de vocabulario inapropiado.
⇢ Se lo más especifico posible.
⇢ Si su comentario es una pregunta por favor sea paciente y será respondida dentro de las 24 horas por fedeemen o cualquier otro usuario.

Códigos para utilizar:
⇢ Para insertar un enlace, utiliza la etiqueta: <a href="URL">TITULO</a>
⇢ Para insertar un código, utilice la etiqueta: <i rel="pre">CÓDIGO</i>
⇢ Para insertar una imagen, utilice la etiqueta: <i rel="image">URL</i>
⇢ Para insertar un título, utilice la etiqueta: <b rel="h3">TEXTO</b>
⇢ Para insertar una nota, utilice la etiqueta: <b rel="quote">TEXTO</b>
⇢ Para insertar texto en negrita, utilice la etiqueta: <b>TEXTO</b>
⇢ Para insertar texto en cursiva, utilice esta etiqueta: <i>TEXTO</i>

¿De quien es esta página?:
⇢ Sluntamy fue creado el 25 de enero de 2010 por fedeemen.

Suscribirse a: Comentarios de la entrada ( Atom )

Últimos comentarios