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>