Gumbi za skrivanje in prikaz elementov v JavaScript

V tem razdelku se bomo naučili skrivati in prikazovati elemente strani. Kot običajno, začnimo z nečim preprostim in postopoma zapletajmo.

Za razgibovanje naj imamo odstavek in dva gumba:

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

Pridobimo povezave do naših elementov v spremenljivke:

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

Naredimo zdaj tako, da ob kliku na en gumb naš odstavek skrije, ob kliku na drugega pa se prikaže. Za to bomo dali ali odstranili elementu ustrezen CSS razred:

.hidden {
	display: none;
}

Rešimo našo nalogo:

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

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

Spremenite mojo kodo tako, da bo na voljo samo en gumb. Naj ob prvem kliku na ta gumb element prikaže, ob drugem kliku pa se skrije.