Gombok elemek elrejtéséhez és megjelenítéséhez JavaScript segítségével

Ebben a részben megtanuljuk, hogyan rejthetünk el és jeleníthetünk meg weblap elemeket. Szokás szerint kezdjük valami egyszerűvel, és fokozatosan bonyolítjuk a feladatot.

Bemelegítésként legyen egy bekezdésünk és két gomb:

<p id="elem">szöveg</p>
<input type="submit" id="show" value="megjelenítés">
<input type="submit" id="hide" value="elrejtés">

Kérjük le az elemeinkre mutató hivatkozásokat változókba:

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

Tegyük most azt, hogy az egyik gombra kattintva a bekezdésünk elrejtődjön, a másikra kattintva pedig megjelenjen. Ehhez adjuk meg, vagy vegyük el az elemnek a megfelelő CSS osztályt:

.hidden {
	display: none;
}

Oldjuk meg a feladatunkat:

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

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

Módosítsa a kódomat úgy, hogy csak egy gomb legyen. Az első kattintásra a gombon az elem jelenjen meg, a másodikra pedig rejtődjön el.