Бутони за скриване и показване на елемент на 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');
});

Модифицирайте кода ми така, че да има само един бутон. Нека при първо кликване на този бутон елементът да се показва, а при второ - да се скрива.