Que je sache les seuls plans "faire apparaître/disparaître un bidule sans JavaScript" impliquent des pseudo-sélecteurs CSS, particulièrement ":hover" et éventuellement des pseudo-sélecteurs d'états, en particulier ":checked" (pour un <input type="checkbox"> hein, j'explique au cas où).

On peut mettre un bloc en "display: none", qui devient "display: block" (ou autre hein) quand on passe sur un élément. Ce qui peut servir à afficher des tooltips par exemple.

Une autre application similaire consiste à utiliser une checkbox pour afficher ou masquer un élément. Problème (selon mes connaissances actuelles c'est un problème, dites-moi dans les commentaires si je me trompe): il faut absolument que l'élément à montrer/cacher soit un(e) frère/soeur du checkbox, où c'est impossible de sélectionner cet élémént... A moins peut-être de le mettre comme enfant de <input>, mais c'est pas un peu bizarre ça? C'est un peu comme coller une jambe sur un nez, quoi (il faut applatir le nez d'abord).

Prenons cet exemple:

<label for="chk1">Experience 1</label>
 <input type="checkbox" id="chk1" />
 <div class="hidden">
   <p>Hidden message</p>
 </div>

Puis dans les styles:

.hidden {
  display: none;
}

#chk1:checked ~ .hidden {
  display: block;
  padding: 1rem;
  background-color: deeppink;
  color: white;
}

Ici j'utilise le sélecteur que-personne-n'utilise "~" qui sélectionne le bidule qui est exactement précédé par le machin est avant le "~" (j'explique hyper bien), donc dans le cas ci-dessus, je sélectionne les éléments qui ont la classe "hidden" et qui sont exactement précédé par un élément qui a l'ID "chk1" et qui est dans l'état "checked".

Il y a aussi le sélecteur non moins obscur "+", qui euh... Ben qui fait la même chose en fait non? Ouais **bruit de slip qui craque**. Truc du genre.

Je me suis dit, "hey mais, on pourrait-y pas utiliser cette astuce pour afficher et cacher un menu de navigation?" — Il suffit de masquer la checkbox en elle-même pour la remplacer par une icône de menu, et ça c'est plus facile que ça en a l'air parce que, je ne sais pas si vous avez remarqué, mais cliquer un <label> associé à un checkbox ça actionne le dit checkbox.

Il s'agit donc juste de mettre un genre d'image dans un label et cacher le checkbox sans le retirer du DOM. J'ai choisi d'utiliser "opacity: 0" mais pour les plus old-school d'entre-vous, il y a toujours le bon vieux text-indent: -99999999999px.

Bon par contre comme je disais il y a le "petit" problème de position du menu de navigation dans le document, il est supposé être frère/soeur du checkbox.

J'ai utilisé "position: fixed" pour tripoter son affichage, ce qui fonctionne parce que le menu est le premier élément à avoir un "position" différent de "static" (qui est le positionnement par défaut, mais vous saviez déjà ça n'est-ce pas).

Attention si un parent avait déjà un contexte de positionnement ça peut tout faire foirer, hein. Pensez-y si vous êtes dans le cas de "CA MARCHE PO CHEZ MOA".

Je vous livre le résultat fini, affichez la source et téléchargez le CSS si ça vous intéresse. C'est une brève, faut que je fasse bref.

Il s'agit de tripoter la taille de la zone d'affichage pour voir comment ça se comporte selon les tailles d'écran (c'est écrit en "mobile-first").