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:

html<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:

javascriptlet 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:

css.hidden {
  display: none;
}

Rešimo naš zadatak:

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

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