CSS: DESPLEGAR TEXTO OCULTO EN PÁGINA HTML - MOSTRAR/OCULTAR IMAGEN O VIDEO SIN JS
Los textos, imágenes, videos, etc, se pueden ocultar en una página web, para ser mostrados, solamente, cuando el lector considere que quiere verlos.
Las respuestas escondidas se pueden desplegar mediante CSS y pueden incluir cualquier formato sin usar Javascript.
Ejemplo de Texto e imagen ocultos:
Este texto oculto está acompañado del logo de CóDIGoS. También puede ocultar y mostrar audio, video, etc, sin Javascript.
Para implementar estos códigos CSS y HTML, utilizamos solo dos pasos, así:
1- Colocar el estilo entre <head> y </head>, escribiendo los siguientes códigos:
<style>
#activar{display:none}
.inputlabel{display:inline-block;height:30px;line-height:30px;padding:5px 10px;color:#339;cursor:pointer}
#activar ~ .inputlabel:before{content:"Ver TEXTO E IMAGEN OCULTOS"}
#activar ~ .desplegable{display:none;overflow:hidden;padding:10px 20px}
#activar:checked ~ .desplegable{display:block}
#activar:checked ~ .inputlabel:before{content:"Cerrar EJEMPLO"}
</style>
Puede cambiar el color de la letra, márgenes, los textos de Abrir y Cerrar, etc.
Igualmente, puede llevar todo el código anterior a la hoja de estilos directamente, si no es muy frecuente el empleo de este método de Ocultar y Mostrar.
2- Agregar entre <body> y </body>:
<input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar"> </label>
<div class="desplegable">
<br>
<p>Este es el texto oculto con Imagen. También puede ocultar y mostrar audio, video, etc, sin Javascript.</p>
<img alt="Nombre de IMAGEN" src="ruta de imagen.png" title="Nombre de Imagen">
<br>
</div><!-- CIERRA desplegable -->
Reemplazar textos y demás.