Tlačidlá na skrytie a zobrazenie prvku v JavaScripte

V tejto časti sa naučíme skrývať a zobrazovať prvky stránky. Ako obvykle, začneme niečím jednoduchým a budeme postupne komplikovať.

Na rozcvičku nech máme odsek a dve tlačidlá:

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

Získame odkazy na naše prvky do premenných:

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

Teraz urobme to, aby pri kliknutí na jedno tlačidlo sa náš odsek skryl, a na druhé - zobrazil. Pre tento účel pridáme alebo odoberieme prvku príslušnú CSS triedu:

.hidden {
	display: none;
}

Vyriešme našu úlohu:

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

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

Upravte môj kód tak, aby bolo iba jedno tlačidlo. Nech po prvom kliknutí na toto tlačidlo sa prvok zobrazí a po druhom - skryje.