Копчи за скривање и прикажување на елемент во JavaScript

Во овој дел ќе научиме како да скриеме и прикажеме елементи на страницата. Како и обично, ќе започнеме со нешто едноставно, и постепено ќе усложнуваме.

Нека за загревање имаме параграф и две копчиња:

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

Ги добиваме врските до нашите елементи во променливи:

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');
});

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