Spoiler para mostrar y ocultar contenido
Un spoiler basicamente sirve para poner contenido oculto, lo usamos cuando en una página necesitamos poner grandes cantidades de contenido y no queremos ahogar al visitante con tanta informacion. Entonces con un spoiler el visitante tendrá la opción de ver o no el contenido en dicho spoiler.
Pasemos a los ejemplos así lo entenderán mejor, ya que no soy muy bueno explicando.
Puedes ver un ejemplo haciendo click en el botón que dice "mostrar".
Bueno por ejemplo este spoiler de acá abajo tiene incrustado un video de YouTube. Una canción de Adele "set fire to the rain".
Bueno les dejo el código del Spoiler aquí debajo insertado en un spoiler jaja.
Donde dice: Aquí el contenido que queremos ocultar
Ponemos el contenido que querramos fotos, videos, texto lo que se les ocurra. Cualquier duda preguntar por el chat que flota en la esquina inferior derecha o por correo.
Como personalizar los botones del Spoiler.
Si no te gusta la apariencia del botón o quieres cambiar el texto "mostrar" y "ocultar" por otra cosa.
Veamos como cambiar el texto del botón observando el código:
<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>
Es relativamente fácil donde dice Mostrar: lo cambiamos por el texto que nosotros querramos al igual podemos poner lo que querramos donde dice "Ocultar".
También puedes usar una imágen como botón.
Observemos nuevamente el código:
<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>
Donde dice: "URL de la imágen", ponemos la dirección URL de la imágen que más nos guste
Aquí abajo un ejemplo:
Acá les dejo el código para que lo modifiquen cuanto quieran: