Comment afficher ou cacher du HTML en CSS sans JavaScript ?

Il existe plusieurs méthodes pour cacher du texte sans devoir utiliser JavaScript.

Il y a l'élément < details > qui peut être utilisé pour afficher ou cacher du texte.

Remarque : la balise details n'est à ce jour pas encore intégrée à Microsoft Edge.

<details>
<summary>plus</summary> 
<p>exemple</p>
</details> 

Il existe aussi un moyen détourné, avec un peu de CSS et les balises IINPUT du type RADIO ou CHECKBOX:

<style>
#more:not(:checked) ~ #exemple{display: none;} 
</style>

<input id="plus" type="checkbox" />
<label for="plus">plus</label>

<p id="exemple">exemple</p>

Vous pouvez aussi utiliser la directive :target.

<style>
#exemple{display: none;}
#exemple:target {display: block;}
#moins{display: none;}
#exemple:target ~ #moins{display: block;}
</style>

<a href="#exemple" id="plus">plus</a>
<p id="exemple">exemple</p>
<a href="#" id="moins">moins</a>