Faire apparaître une zone en css

Piloter l'apparence, le style, peut se fait généralement et efficacement en javascript. Par exemple, déplier une zone de texte se fait très bien en javascript.
Par contre éviter javascript permet d'obtenir en général une page plus légère, rapide et réactive. Pour une utilisation mobile, il est appréciable en général d'éviter javascript tant que possible au profit de css seulement. Ce n'est pas toujours possible, les possibilités offertes en css sont grandes, continuent même de se développer, mais tout n'est pas pour autant réalisable.

Nous allons voir ici comment piloter l'apparence d'une zone seulement en css: au click sur un élement, une zone (de texte par exemple) apparaît.
L'astuce est ici d'utiliser une checkbox, de faire apparaître son label lié comme un bouton.
De plus, en utilisant correctement les symboles +, > et ~, on peut piloter un élément plus ou moins éloigné du bouton cliqué.

Esssayez donc: Click here

Une zone de texte …
Initialement cachée,
puis, enfin, découverte …

Plus qu'un click, et elle se recache…

Codes html et css

<div>
  <input type="checkbox" id="chk" class="inputchk">
  <label for="chk" class="chktitle">Click here</label>
  <div class="main">
		Une zone de texte …
		<br>
		Initialement cachée,
		<br>
		puis, enfin, découverte …
		<br><br>
		Plus qu'un click, et elle se recache…
  </div>
</div>

et son css pour le piloter et le mettre en forme

.main, .inputchk{display:none}
.chktitle{padding:1em;color:red}
.main{margin-top:1em;padding:1em;border-left:1px solid blue}
.chktitle{border:1px solid blue}
.inputchk:checked ~ .main{display:block;}
.inputchk:checked + .chktitle{background-color:green}

Détails et explications

Tout d'abord, la zone ciblée (main ici) et la checkbox sont cachées: display: none La checkbox restera toujours cachée, mais cela ne l'empêche pas de faire son travail; il est important pour cela de bien la lier au bouton, ici le label: le paramètre for= du label a forcément le même nom que l'identifiant de la checkbox.
Ensuite, tout se pilote via la classe inputchk:checked.

La pilotage peut là être différencié en utilisant à bon escient les symboles +, > ou encore ~

Symboles +, > et ~ en CSS

À l'intérieur du conteneur,

le signe > cible tous les enfants direct
le signe + cible l'élément immédiatement après et ayant le même parent
le signe ~ cible tous les éléments qui suivent, sans être immédiatement après mais qui ont le même parent

Par exemple, dans

<div id="ct">
  <p>1er paragraphe</p>
  <p>2ème paragraphe</p>
  <div>
    <p>sous-paragraphe 2.1</p>
    <p>sous-paragraphe 2.2</p>
  </div>
  <p>3ème paragraphe</p>
  <p>4ème paragraphe</p>
</div>

alors

div#ct p {color:red}
cible tous les enfants du conteneur ct, donc ici tous les paragraphes et sous paragraphes (ici tout sera en rouge)
div#ct > p {color:red}
cible les enfants directs, donc ici les 1er, 2ème, 3ème et 4ème paragraphes (pas les 2 sous-parapgraphes)
div#ct div + p {color:red}
cible l'élément immédiatement après, ici seul le 3ème paragraphe est visé
div#ct div ~ p {color:red}
cible tous les éléments qui suivent sans être celui directement après et qui ont le même parent, ici il s'agit des 3ème et 4ème paragraphes