sábado, 2 de enero de 2016

CLIC PARA VER CONTENIDO ( de lo más simple)

El CSS propiamente dicho:


<style>
#activar ~ .desplegable {display: none;overflow: hidden;} 
#activar:checked ~ .desplegable {display: block;}
                                                           
</style>       

El Html

<input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar">Clic para ver contenido</label>
<div class="desplegable">
  Aquí podría ir cualquier tipo de elemento

</div>

Que se parezca más a un boton escondiendo el Checkbox y variando algunos aspectos:

El CSS propiamente dicho:


<style>

#activar {display: none;}.inputlabel {display: inline-block;height: 20px;line-height: 20px;padding: 5px 10px;background: #000;color: #fff;}

#activar ~ .inputlabel:before {content: "ABRIR"}

#activar ~ .desplegable {display: none;overflow: hidden;padding: 10px 20px; background: #000;color: #fff;}#activar:checked ~ .desplegable {display: block;}

#activar:checked ~ .inputlabel:before {content: "CERRAR"

</style>


El Html

<input id="activar" name="activar" type="checkbox">
<label class="inputlabel" for="activar">Clic para ver contenido</label>
<div class="desplegable">
  Aquí podría ir cualquier tipo de elemento

</div>


COMENTARIOS GOOGLE+

Suscríbete vía email ¡gracias!:

Delivered by FeedBurner