Spoiler HTML: Cómo ocultar y mostrar contenido en una entrada

¿Qué es un spoiler y cómo se utiliza en HTML?

Los spoilers en HTML son elementos que permiten ocultar contenido, como texto o imágenes, y mostrarlo solo cuando el usuario lo solicita. Son especialmente útiles para mantener el suspense en una entrada o revelar información adicional opcional. Para crear un spoiler en HTML, se utiliza una combinación de HTML, CSS y JavaScript.

Creando un spoiler con HTML y CSS

Para crear un spoiler básico, podemos utilizar etiquetas HTML como <div> y <span>, junto con estilos CSS. Aquí tienes un ejemplo de código:

<div class="spoiler"> <span class="spoiler-title">Haz clic para mostrar el contenido</span> <div class="spoiler-content"> <!-- Aquí va el contenido oculto --> </div> </div>

Código Css

.spoiler-content { display: none; } .spoiler-title { cursor: pointer; text-decoration: underline; } .spoiler-title:hover { color: blue; }

Añadiendo funcionalidad ocultar texto con JavaScript

Si deseas que el spoiler se muestre y oculte al hacer clic en el título, necesitarás agregar un poco de JavaScript. Aquí hay un ejemplo de cómo hacerlo:

<script> function toggleSpoiler() { var spoilerContent = document.querySelector('.spoiler-content'); spoilerContent.style.display = spoilerContent.style.display === 'none' ? 'block' : 'none'; } var spoilerTitle = document.querySelector('.spoiler-title'); spoilerTitle.addEventListener('click', toggleSpoiler); </script>

¿Cómo puedo ocultar contenido en HTML código completo?

Aquí está el código completo correspondiente para crear un spoiler en HTML y ocultar el contenido en tus entradas de Blogger o Wordpress:

<div class="spoiler">  <span class="spoiler-title">Haz clic para mostrar el contenido</span>  <div class="spoiler-content">>    <!-- Aquí va el contenido oculto -->  </div>></div><script>  function toggleSpoiler() {    var spoilerContent = document.querySelector('.spoiler-content');    spoilerContent.style.display = spoilerContent.style.display === 'none' ? 'block' : 'none';  }>
  var spoilerTitle = document.querySelector('.spoiler-title');  spoilerTitle.addEventListener('click', toggleSpoiler);</script>

Personalizar la apariencia del spoiler

Una vez que hayas agregado el código de ocultar texto, puedes personalizar su apariencia utilizando CSS. Puedes ajustar los colores, tamaños, fuentes y efectos de transición para que se adapten al diseño de tu sitio web y brinden una experiencia visual atractiva para los usuarios.

Otras formas de ocultar texto HTML

Aquí te dejo una serie de formas para ocultar textos HTML tanto para Blogger como en WordPress.

Puedes ver un ejemplo haciendo clic en el siguiente botón (Ocultar Texto).

Este es un texto que estará oculto hasta que el lector decida visualizarlo, y tendrá la opción de volver a ocultarlo al presionar nuevamente el botón.

Se pueden incluir en el código elementos diversos que desees mantener ocultos, como una tabla de contenido, una imagen, un reproductor de audio o un vídeo, entre otros. Haz clic en el botón (Mostrar Spoiler) para revelar el contenido oculto.

Puedes usarlo en tu blog de Blogger o WordPress, sólo tienes que colocar este código en una entrada cada vez que se 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;">
Edita el texto o contenido que quieres ocultar
</div></div>

Edita la sección donde se indica el contenido en (Rojo) que deseas ocultar, simplemente añade el texto, imagen o cualquier elemento multimedia que desees ocultar. Si el botón predeterminado no es de tu agrado, puedes consultar esta entrada para aprender a personalizar los botones según tus preferencias. Alternativamente, puedes utilizar un enlace de texto en lugar de un botón para revelar el contenido oculto.

Mostrar / Ocultar HTML ▼▲

Este es un ejemplo de un contenido con texto oculto y una imagen

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;">
Edita el contenido o texto que vas a ocultar
</div></div>

Si lo deseas, también puedes utilizar una imagen en lugar de texto para implementar la técnica de spoiler y ocultar texto HTML (Haz clic en la imagen para ver).

¿Como ocultar texto html?
Ocultar contenido blogger y WordPress
Ocultar texto Blogger y WordPress
Ocultar texto html entradas blog
Este es otro ejemplo de Spoiler para ocultar textos de contenidos

El código sería el siguiente:

<div class="divspoiler">
<img src="URL (Enlace) 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 y texto a ocultar
</div></div>

Muy conveniente y sencillo de utilizar, ¿verdad? Puedes incluir múltiples en la misma publicación sin requerir alterar ningún identificador ni elementos similares. Solo asegúrate de no alternar a la pestaña "Redactar" una vez que lo hayas insertado y de no modificar los espacios del código para asegurar un correcto funcionamiento de tu código..