Tlačítka pro skrytí a zobrazení prvku v JavaScriptu

V této sekci se naučíme skrývat a zobrazovat prvky stránky. Jako obvykle, začneme něčím jednoduchým a budeme postupně zvyšovat obtížnost.

Pro rozcvičku mějme odstavec a dvě tlačítka:

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

Získáme odkazy na naše prvky do proměnných:

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

Nyní uděláme to, aby po kliknutí na jedno tlačítko byl náš odstavec skryt a na druhé - zobrazen. K tomu budeme přidávat nebo odebírat prvku příslušnou CSS třídu:

.hidden {
	display: none;
}

Vyřešme náš úkol:

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

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

Upravte můj kód tak, aby bylo pouze jedno tlačítko. Nechť po prvním kliknutí na toto tlačítko se prvek zobrazí a po druhém - skryje.