¿Cuales son tus elementos favoritos?

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. 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).

    ResponderEliminar
    Respuestas
    1. ¿Colocaste el código desde la pestaña HTML?

      Eliminar

Antes de comentar recuerda:
► No se permite realizar publicidades a otras páginas.
► 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 y actualmente es administrado únicamente por el.