Przyciski do ukrywania i pokazywania elementu w JavaScript

W tej sekcji nauczymy się ukrywać i pokazywać elementy strony. Jak zwykle, zaczniemy od czegoś prostego i stopniowo będziemy zwiększać złożoność.

Dla rozgrzewki załóżmy, że mamy akapit i dwa przyciski:

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

Pobierzmy referencje do naszych elementów do zmiennych:

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

Zróbmy teraz tak, aby po kliknięciu w jeden przycisk nasz akapit był ukrywany, a po kliknięciu w drugi - wyświetlany. Zrobimy to dodając lub usuwając elementowi odpowiednią klasę CSS:

.hidden {
	display: none;
}

Rozwiążmy nasze zadanie:

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

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

Zmodyfikuj mój kod tak, aby był tylko jeden przycisk. Niech po pierwszym kliknięciu na ten przycisk element się pokaże, a po drugim - ukryje.