Texto oculto con Spoiler

En entradas anteriores hemos mostrado cajas para ocultar texto en nuestras entradas.
Tablas con texto
Ocultar contenido en nuestras entradas
Vamos a mostrar otra forma para ocultar texto, pero con el efecto Spoiler.
Para aplicarlo nos dirigimos a la edición HTML y pegamos este código.

<style type="text/css"> #spoiler { /* checkbox*/ display: none; /*ocultar casilla de verificación*/ } #spoiler + label { /* etiqueta spoiler*/ display: block; width: 300px; margin: 0 auto; padding: 7px 7px; font-family: 'leelawadee', 'arial', 'serif' !important; font-variant: small-caps !important; text-shadow: 0 1px 0 #cc0000; text-align: center; overflow: hidden; cursor: pointer; color: #000000; border-radius: 20px; box-shadow: 0px 6px rgba(139,69,19,0.50); background: linear-gradient(#CD6C0A 10%, #F2E8DE 90%); border-top:0.5px solid saddlebrown !important; border-right:1px solid saddlebrown !important; border-left:1.5x solid saddlebrown !important; border-bottom:2px solid saddlebrown !important; } #spoiler + label:hover { /* efecto hover cuando se sitúa el ratón sobre la etiqueta spoiler*/ background: #E8E4C8 !important; color: #7a7a0f !important; border: none !important; box-shadow: 0px 6px grey; } #spoiler:checked + label { /* etiqueta spoiler cuando está seleccionada*/ background: linear-gradient(#d9dde2 2%, #7a7a0f 98%) !important; color: #000000 !important; text-shadow: 0 1px 0; box-shadow: 0px 3px darkolivegreen; border: 1px solid silver !important; transform: translateY(3px); } .oculto { /* caja texto oculto inicialmente*/ height: 0px; /*altura 0 para que no ocupe espacio*/ overflow: hidden; /*no desborda para que no ocupe espacio*/ opacity: 0; /*opacidad 0, no se ve*/ margin: 30px auto 0; } #spoiler:checked + label + .oculto { /* caja texto oculto cuando está seleccionada*/ height: auto; /*altura auto*/ overflow: hidden; /*no desborda el contenido*/ opacity: 1; /*opacidad 1, se ve*/ } </style> <input type="checkbox" id="spoiler"></input> <label for="spoiler">Texto del spoiler</label> <div class="oculto"> <div style="background: linear-gradient(#d9dde2 2%, #7a7a0f 98%); color: #000000; border: 2.5px solid #d1d1b2; border-radius: 19px; font-family: calibri , sans-serif; font-size: 20px; margin: 0px 150px 0px 150px; padding: 35px; text-align: left;"> Texto oculto inicialmente.</div> </div> /textarea> <input onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button" value="Seleccionar texto" /></form> </center> </div> </div> <br /></div>

El resultado es el siguiuente

Texto del spoiler

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.