A veces queremos ocultar un Spoiler en nuestra entrada, cómo añadir spoiler, o bien queremos hacer desplegable una parte del texto sin más, y por ello traigo este tutorial tan sencillo para que puedas lograrlo en tu blog de Blogger.

También se le llama acordeón, por que funciona más o menos así, como un acordeón de texto.

En muchas ocasiones esta funcionalidad de acordeón o desplegable se usa para las preguntas frecuentes, o FAQ’s de tu web o blog. Resulta muy útil por que no hace que nuestro post o página sea demasiado largo y a la vez crea un diseño muy atractivo para la lectora o el lector.

Os comparto dos formas distintas de lograrlo, una con script, y otra sin él. La mejor manera siempre es sin script, por que el script ralentiza la carga de la página, pero es cosa de preferencias al fin y al cabo, así que te dejo las dos opciones.

Este tutorial está super completo, para que puedas lograr lo que quieres, pero es cierto que si no tienes unos conocimientos básicos de código te costará personalizarlo o colocarlo donde realmente quieres. Presta atención a los vídeos que completan el tutorial para que entiendas mejor cómo funciona.

Cómo insertar un acordeón o desplegable en una entrada o página de tu blog sólo con CSS

Para esta opción no puedes tener en tu entrada ningún formulario con «input» por que le damos estilo al input en este caso. Así que, es bueno para páginas donde no tenemos formulario de suscripción pero no te funcionarán ambas cosas en una entrada con formulario de suscripción. Todo tiene sus pros y sus contras.

De todas formas es mucho más recomendable usarlo sin script, así que si puedes, elige esta forma de crear el desplegable o acordeón.

• Para usarlo simplemente creamos o editamos nuestra entrada/post o página y nos vamos a la parte de HTML, arriba a la izquierda.
• Ahí debemos pegar el siguiente código:

<br/><br/>
<div class="tab"> 
<input id="tab-one" type="checkbox" name="tabs"> 
<label for="tab-one">Sección 1</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 

<div class="tab"> 
<input id="tab-two" type="checkbox" name="tabs"> 
<label for="tab-two">Sección 2</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 

<div class="tab"> 
<input id="tab-three" type="checkbox" name="tabs"> 
<label for="tab-three">Sección 3</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 
<br/><br/>
 
<style> 
.tab { 
position: relative; 
margin-bottom: 1px; 
width: 100%; 
color: #fff; 
overflow: hidden; 
} 
input{ 
position: absolute; 
opacity: 0; 
z-index: -1; 
} 
label { 
position: relative; 
display: block; 
padding: 0 0 0 1em; 
background: #8fb59e; 
font-weight: bold; 
line-height: 3; 
cursor: pointer; 
} 
.tab-content { 
max-height: 0; overflow: hidden; 
color:#000; 
background: #fff; 
-webkit-transition: max-height .35s; 
-o-transition: max-height .35s; 
transition: max-height .35s; 
} 
.tab-content p { 
margin: 1em; 
} 
/* :checked */ 
input:checked ~ .tab-content { 
max-height: 10em; 
} 
/* Icon */ 
label::after { 
position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; 
} 
input[type=checkbox] + label::after { 
content: "+"; 
} input[type=radio] + label::after { 
content: "25BC"; 
} 
input[type=checkbox]:checked + label::after { 
transform: rotate(315deg); 
} 
input[type=radio]:checked + label::after { 
transform: rotateX(180deg); 
} 
</style>

• Ahora toca editar el texto de las secciones. Recuerda que seguimos en la parte HTML del post.
• Si quieres añadir o eliminar secciones, solo debes añadir o eliminar la suiguiente parte, fíjate donde empieza y donde termina.

<div class="tab">       
<input id="tab-two" type="checkbox" name="tabs">       
<label for="tab-two">Sección 2</label>       
<div class="tab-content">         
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>       
</div>     
</div>  

Esa es la parte del código que crea el desplegable con el texto dentro.

• Después de tener lista esta parte, puedes ir a «Redactar» y añadir antes o después del código el resto de la entrada.

Ver vídeo tutorial paso a paso para añadir desplegable css en una entrada del blog

Cómo añadir un spoiler a un post o insertar un acordeón o desplegable en una entrada o página de tu blog con script

Así se vería este tipo de acordeón:

Para realizar este tutorial debes seguir el paso a paso para no tener problemas. Además debes editar el HTML de tu entrada o página. Con lo cual te recomiendo que, si puedes, hagas primero esta parte, y luego añadas el texto que acompañe, imágenes o lo que sea. Pero primero inserta este código completo en HTML para que luego no tengas que editar nada. Si no lo haces así puede que te cueste mucho más trabajo, ya que cuando editamos el HTML de nuestra entrada y luego volvemos a «Redactar» y luego de nuevo a «HTML» pueden sufrir cambios en el código que luego son muy difíciles de identificar si no entiendes de código. Más abajo explico más detalles.

Hay dos formas de hacerlo. Si lo vas a usar en varias páginas lo mejor es que lo hagas como esta primera opción si solo lo haces en una entrada, sigue el siguiente, al final de este.

La estructura de código que usaremos es la siguiente:

<button class="accordion">SECCIÓN 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Vamos a usar este código en un bloc de notas, para escribir todo lo necesario y prepararlo y luego copiarlo y pegarlo en nuestra entrada.

Antes de editarlo en nuestro block de notas vamos a añadir el estilo CSS en nuestra plantilla y el script que hace que funcione.

• Toca editar nuestra plantilla así que vamos a Tema, hacemos una copia de seguridad y le damos luego a Editar HTML y luego buscamos en plantilla el siguiente código (si no sabes cómo, mira este vídeo)

b:skin

El segundo enter, osea, el segundo resultado , es el que nos interesa.

• Justo antes de los dos corchetes de cierre :

]]></b:skin>

• Escribimos lo siguiente:

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '02B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

• Y guardamos.

Como siempre sabes que puedes editar a tu gusto. Colores (#444 y #ccc y similares), tipos de letra  y puedes añadir todo lo que consideres.

En este ejemplo tienes la SECCIÓN que es el título y un párrafo.

• Para crear párrafos dentro de la sección podemos usar <p> aquí dentro el párrafo </p> o también usar la etiqueta de espacio, que es como un «enter» y se escribe de la siguiente forma: <br/>
• Para crear listas escribimos <li> para abrir la línea de lista y </li> para cerrar la línea de lista.
• Es importante que cuando edites este tipo de contenido no cambies en tu entrada de «Redactar» a «HTML» por que Blogger suele molestar incluyendo más código o influyendo en él de manera negativa y puede que luego no funcione de forma adecuada. Por ello os recomiendo hacerlo primero en un block de notas.

Ahora debemos insertar el script que hará que funcione.

• Para ello en nuestra plantilla buscamos (si no sabes buscar un código en tu plantilla mira este vídeo)

</body>

• Justo encima pegamos el siguiente script

<script>
var acc = document.getElementsByClassName("accordion");
var i;


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

• Guardamos plantilla y listo

  Cuando tengas en tu block de notas el primer código de esta parte del tutorial preparado lo insertas en la entrada en la parte de HTML, y luego vas a «Redactar» y redactas el resto de la entrada, antes o después de tu zona de desplegable.    Si controlas un poco de código podrás insertarlo donde quieras, después de redactar todo el post. Pero si no controlas también puedes redactar primero toda la entrada y luego insertar en la parte HTML al final de todo, la parte desplegable y listo. Esto ya es cosa de tus conocimientos en el tema.

Añadir spoiler en un post, el desplegable con script a una sola página

Para esto es muy sencillo por que solo debemos editar el post en el que queremos insertar el desplegable o acordeón de texto.  

• Vamos a crear o editar nuestra entrada y le damos a HTML arriba a la izquierda.
• Luego pegamos el siguiente código:

  <br/><br/>
<button class="accordion">SECCIÓN 1</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
<button class="accordion">SECCIÓN 2</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
<button class="accordion">SECCIÓN 3</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div>
<br/><br/> 
<style> 
.accordion {   
background-color: #eee;   
color: #444;   
cursor: pointer;   
padding: 18px;   
width: 100%;   
border: none;   
text-align: left;   
outline: none;   
font-size: 15px;   
transition: 0.4s; } 
.active, .accordion:hover 
{   
background-color: #ccc; 
} 
.accordion:after {   
content: "02B";   
color: #777;   
font-weight: bold;   
float: right;   
margin-left: 5px; 
} 
.active:after {   
content: "2212"; 
} 
.panel {   
padding: 0 18px;   
background-color: white;   
max-height: 0;   
overflow: hidden;   
transition: max-height 0.2s ease-out; 
} 
</style> 
<script> var acc = document.getElementsByClassName("accordion");   var i;   for (i = 0; i < acc.length; i++) {     acc[i].addEventListener("click", function() {       this.classList.toggle("active");       var panel = this.nextElementSibling;       if (panel.style.maxHeight) {         panel.style.maxHeight = null;       } else {         panel.style.maxHeight = panel.scrollHeight + "px";       }     });   } </script>

• Edita la parte de secciones que quieres crear. Cada sección va desde <button class=»accordion»>  hasta </p> </div> . Puedes copiar la sección y pegarla si quieres añadir más, o borrar desde el código de principio hasta el último como te he dicho. La sección es así siempre:

<button class="accordion">SECCIÓN 1</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div>

• Luego de editar esa parte ya puedes pasar al «Redactar» y completar el post encima o debajo de las secciones.

Ver vídeo tutorial paso a paso para añadir spoiler desplegable con script en una entrada del blog

  -VÍDEO PENDIENTE-              

Esto es todo, espero que te haya resultado útil. Recuerda que me ayuda muchísimo que compartas en tus redes sociales, que comentes y me recomiendes!! Muack!!

• Fuente del tutorial con script
• Fuente del tutorial con CSS