Dugmad za sakrivanje i prikazivanje elemenata u JavaScriptu

U ovom odeljku ćemo naučiti kako da sakrijemo i prikažemo elemente stranice. Kao i obično, počećemo od nečeg jednostavnog, i postepeno ćemo povećavati složenost.

Neka za zagrevanje imamo pasus i dva dugmeta:

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

Dohvatićemo reference na naše elemente u promenljive:

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

Hajde sada da uradimo tako da klikom na jedno dugme naš pasus bude sakriven, a na drugo - prikazan. Za to ćemo dodeliti ili ukloniti odgovarajući CSS klasu elementu:

.hidden {
	display: none;
}

Rešimo naš zadatak:

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

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

Izmenite moj kod tako da postoji samo jedno dugme. Neka nakon prvog klika na ovo dugme element bude prikazan, a nakon drugog - sakriven.