Дугмићи за сакривање и приказ елемента у JavaScript-у

У овом одељку ћемо научити како да сакривамо и приказујемо елементе странице. Као и обично, почећемо од нечег једноставног и постепено ћемо ићи на сложеније ствари.

За загревање, претпоставимо да имамо пасус и два дугмета:

<p id="elem">текст</p>
<input type="submit" id="show" value="прикажи">
<input type="submit" id="hide" value="сакриј">

Добијмо референце на наше елементе у променљиве:

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

Хајде сада да урадимо тако да кликом на једно дугме наш пасус буде сакривен, а кликом на друго - приказан. За то ћемо додељивати или уклањати одговарајућу CSS класу елементу:

.hidden {
	display: none;
}

Решимо наш задатак:

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

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

Модификујте мој код тако да постоји само једно дугме. Нека се првим кликом на то дугме елемент прикаже, а другим кликом - сакрије.