Tablas con texto

Hoy vamos a mostraros como podemos poner en nuestras entradas textos escondido mediante tablas.
Simplemente tenemos que pegar este código en nuestra edición HTML.

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <br /> <div class="tab"> <input id="tab-one" name="tabs" type="checkbox" /> <label for="tab-one">Sección 1</label> <br /> <div class="tab-content"> 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.</div> </div> <div class="tab"> <input id="tab-two" name="tabs" type="checkbox" /> <label for="tab-two">Sección 2</label> <br /> <div class="tab-content"> 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.</div> </div> <div class="tab"> <input id="tab-three" name="tabs" type="checkbox" /> <label for="tab-three">Sección 3</label> <br /> <div class="tab-content"> 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.</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> </div>

Modificamos el texto  marcado en morado por el texto que sale en la tabla  <label for="tab-one">Sección 1</label>.
Modificamos el texto  que ve dentro  de <div class="tab-content"> 
por el texto que deseamos ocultar.

Nos quedaría de la siguiente forma:

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.

Seleccionar Tablas con texto Ocultar contenido en nuestras entradas Texto oculto con Spoiler Tagboards

Abrir en una nueva ventana