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

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

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

css.hidden {
  display: none;
}

Vyriešme našu úlohu:

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

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