Boutons pour masquer et afficher un élément en JavaScript

Dans cette section, nous apprendrons à masquer et à afficher les éléments de la page. Comme d'habitude, commençons par quelque chose de simple, et compliquons progressivement.

Supposons pour l'échauffement que nous ayons un paragraphe et deux boutons :

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Obtenons les références à nos éléments dans des variables :

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

Faisons maintenant en sorte qu'au clic sur un bouton notre paragraphe soit masqué, et sur l'autre - soit affiché. Pour cela, nous allons ajouter ou supprimer la classe CSS correspondante à l'élément :

.hidden {
	display: none;
}

Résolvons notre tâche :

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

Modifiez mon code pour qu'il n'y ait qu'un seul bouton. Qu'au premier clic sur ce bouton l'élément s'affiche, et au second - soit masqué.