Acordeón desplegable para nuestras entradas

Hoy  vamos a explicar como podemos poner un acordeón desplegable en nuestras entradas para poder ocultar textos.
Simplemente tenemos que dirigirnos en el editor HTML de nuestras entradas e ingresar este código.

ver código 

- Copia este 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>

Sección 1

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.

Sección 2

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.

Sección 3

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.

Modificar la tabla:

    <label for="tab-one">Sección 1</label>, 
Esta es la parte de las tres tablas que se abre..
Cambiaremos Sección 1 por el nombre que queramos poner

   <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">

la parte marcada en rojo la cambiamos por el contenido oculto de las tablas.

  color: #fff;

Color de la letra de las tablas; En este caso blanco

  background: #8fb59e;

Color del fondo de la pestaña

  color:#000;

Color de la tipografía dentro de las pestañas.