Knapper for å skjule og vise elementer på JavaScript

I denne delen vil vi lære å skjule og vise sideelementer. Som vanlig, la oss starte med noe enkelt, og gradvis gjøre det mer komplekst.

La oss for oppvarming ha et avsnitt og to knapper:

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

La oss hente referanser til våre elementer i variabler:

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

La oss nå gjøre det slik at ved klikk på en knapp skjules avsnittet vårt, og ved klikk på den andre - vises. For å gjøre dette vil vi gi eller fjerne den tilsvarende CSS-klassen fra elementet:

.hidden {
	display: none;
}

La oss løse oppgaven vår:

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

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

Modifiser koden min slik at det bare er en knapp. La ved første klikk på denne knappen elementet vises, og ved andre klikk - skjules.