» » » Poner Spoiler sólo con CSS en el blog

Poner Spoiler sólo con CSS en el blog



Los spoilers sirven para ocultar determinado contenido de una entrada o gadget del blog, estos spoilers ocultan contenido y lo muestran sólo cuando el lector desean mirarlo. Hay varia formas aquí dejo como poner Spoiler sólo con código CSS en el blog, sin tener que recurrir a scripts.

El código para este tipo de spoiler con CSS es el siguiente:



<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">
Aquí poner el contenido que quieres ocultar
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>


  • Lo que está en color rojo es lo que tienes que cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno más cambia spoiler1 por spoiler2 y mostrar1 por mostrar2
  • En color verde debes poner el contenido que estará oculto.







Si te gusta la entrada compártela.

¡Gracias!

Publicar un comentario
▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top