Кнопкі для схавання і паказу элемента на 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;
}

Вырашiм нашу задачу:

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

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

Мадыфікуйце мой код так, каб была толькі адна кнопка. Хай па першым кліку на гэтую кнопку элемент паказваецца, а па другім - схаваецца.