Pulsanti per nascondere e mostrare un elemento in JavaScript

In questa sezione impareremo a nascondere e mostrare gli elementi della pagina. Come al solito, inizieremo con qualcosa di semplice, e gradualmente aumenteremo la complessità.

Per riscaldarci, supponiamo di avere un paragrafo e due pulsanti:

<p id="elem">testo</p>
<input type="submit" id="show" value="mostra">
<input type="submit" id="hide" value="nascondi">

Otteniamo i riferimenti ai nostri elementi in variabili:

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

Ora facciamo in modo che cliccando su un pulsante il nostro paragrafo venga nascosto, e sull' altro - venga mostrato. Assegneremo o rimuoveremo all'elemento la corrispondente classe CSS:

.hidden {
	display: none;
}

Risolviamo il nostro compito:

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

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

Modifica il mio codice in modo che ci sia solo un pulsante. Lascia che al primo clic su questo pulsante l'elemento venga mostrato, e al secondo - venga nascosto.