Knapper til at skjule og vise elementer med JavaScript

I dette afsnit vil vi lære at skjule og vise sideelementer. Som sædvanlig starter vi med noget enkelt og gradvist gør det mere komplekst.

Lad os for opvarmning have en afsnit og to knapper:

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

Lad os henvise til vores elementer i variabler:

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

Lad os nu gøre sådan, at ved klik på den ene knap skjules vores afsnit, og ved klik på den anden - vises. For at gøre dette vil vi tildele eller fjerne den tilsvarende CSS-klasse fra elementet:

.hidden {
	display: none;
}

Lad os løse vores opgave:

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

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

Modificer min kode, så der kun er én knap. Lad elementet vises ved det første klik på denne knap, og ved det andet klik - skjules.