En entradas anteriores he visto cómo gestionar contenido extenso y específico para que no distraiga excesivamente al lector o evite su salida si no es de su interés, ocultando parcialmente el contenido mediante una caja con barras de desplazamiento.
En esta entrada voy a ver cómo se puede ocultar el texto y mostrarlo solo cuando el usuario desea verlo, de dos formas distintas y sin hacer uso de JavaScript o jQuery (solo con HTML y CSS).
- Con la acción del ratón, que expandirá el contenido en su totalidad al posicionarlo sobre algún elemento.
- Usando Spoilers (son botones que al hacer clic sobre ellos muestran el contenido que está oculto).
Expandir texto oculto con la acción del ratón (efecto hover)
Voy a ocultar parcialmente contenido en una entrada del blog que solo será visible cuando el usuario posicione el ratón sobre él.
En este ejemplo el contenido oculto es texto pero podría tratarse de una imagen.
Accedo a la entrada en la que voy a incluir el texto que se mostrará parcialmente oculto y hago clic sobre la pestaña HTML.
Añado las líneas de código siguientes,
<style type="text/css">
div.expand {
height: 30px;
margin: 0px 65px 0px 65px;
padding: 20px;
text-align: left;
overflow: hidden;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
}
div.expand:hover {
height: auto;
margin: 0px 65px 0px 65px;
padding: 20px;
text-align: left;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
}
</style>
<div class="expand">
<h4 style="text-align: center;">Texto a mostrar con el contenido oculto.....</h4>
Texto a mostrar expandiendo todo el contenido oculto........
</div>
div.expand {
height: 30px;
margin: 0px 65px 0px 65px;
padding: 20px;
text-align: left;
overflow: hidden;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
}
div.expand:hover {
height: auto;
margin: 0px 65px 0px 65px;
padding: 20px;
text-align: left;
border: 2.5px solid #b0c4de;
background-color: white;
color: navy;
font-size: 18px;
font-family: 'calibri' , sans-serif;
}
</style>
<div class="expand">
<h4 style="text-align: center;">Texto a mostrar con el contenido oculto.....</h4>
Texto a mostrar expandiendo todo el contenido oculto........
</div>
El resultado será el siguiente,
Al posicionar el ratón sobre el texto que está visible en el cuadro, se expandirá la caja y se mostrará todo su contenido (contenido visible y contenido oculto). El contenido de la caja está definido por la etiqueta <div> (entre su etiqueta de apertura <div> y su etiqueta de cierre </div>).
Para dar estilo a la caja y a su contenido, previamente la he identificado con el nombre expand div.expand y he añadido a continuación propiedades CSS para definir el especto.
div.expand {
Corresponde al formato de la caja de texto parcialmente oculto.
div.expand:hover {
Corresponde al formato de la caja de texto expandido cuando se posiciona el ratón sobre la caja.
<style type="text/css">
Incluyo la etiqueta <style> al inicio para definir los estilos que voy a aplicar en esta página HTML específica y que se complementarán con los estilos por defecto del blog. El valor "text/css" indica que el contenido es CSS.
Expandir texto oculto con Spoilers
En este segundo ejemplo voy a conseguir que un texto se muestre o se oculte usando solo HTML y CSS (como en el caso anterior) pero ahora será accionando un botón de tipo Spoiler.
Un spoiler es un botón que permite ocultar y mostrar contenido, como texto o imagénes, y que puede resultar útil para ocultar inicialmente un contenido extenso que, por diversas razones, bien de estética, funcionalidad, mejora de la velocidad de carga, etc, no se muestra excepto cuando el usuario decida verlo mediante una acción por su parte (haciendo clic sobre el botón).
El estilo aplicado en el spoiler de este ejemplo es el mismo que el de las etiquetas de los menús del blog de prueba.
Accedo a la ventana de edición HTML de la entrada en la que voy a añadir el spoiler.
Y añado las siguientes líneas de 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>
#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>
<input type="checkbox" id="spoiler"></input>
Voy a definir dos estados (seleccionado y no seleccionado) para el elemento de HTML <input con el atributo type cuyo valor es checkbox. Lo identifico con el nombre spoiler.
El atributo booleano checked indica que la casilla de verificación está seleccionada.
<label for="spoiler">Texto del spoiler</label>
Añado el texto a mostrar en la etiqueta asociada al spoiler.
<div class="oculto"><div style=
Defino el contenido (texto oculto incialmente) y lo identifico con el nombre "oculto". A continuación añado la etiqueta <div style= con el estilo que voy a aplicar en él.
Entre la etiqueta de apertura y cierre de style, incluyo el código CSS con el estilo correspondiente al botón spoiler y etiqueta, a la casilla de verificación y al texto oculto incialmente.
El resultado es el siguiente;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.