Écrire le HTML et le JavaScript d'un bouton qui affiche ou masque un…

<button id="bascule">Afficher l'aide</button>
<p id="aide" hidden>Saisissez votre identifiant, puis votre mot de passe.</p>

const bouton = document.getElementById("bascule");
const aide = document.getElementById("aide");

bouton.addEventListener("click", function () {
    aide.hidden = !aide.hidden;
    if (aide.hidden) {
        bouton.textContent = "Afficher l'aide";
    } else {
        bouton.textContent = "Masquer l'aide";
    }
});

L'attribut HTML hidden donne l'état initial, et le programme n'a plus qu'à l'inverser. Écrire l'état de départ dans le HTML plutôt que dans le script évite un défaut classique : la page s'affiche d'abord avec l'aide visible, puis le script la cache — l'aide « clignote » au chargement.

Contrôle : le libellé et l'état ne peuvent pas se désynchroniser, puisqu'ils sont recalculés ensemble à chaque clic, et que le libellé est déduit de aide.hidden et non d'une seconde variable.

Piège : tenir un compteur de clics et tester sa parité pour savoir si l'aide est visible. Cela fonctionne tant que rien d'autre ne touche au paragraphe — puis cesse de fonctionner le jour où un autre bouton le masque aussi. L'état doit être lu là où il est, dans la page.