Knoppen om een element te verbergen en tonen met JavaScript

In dit deel leren we hoe we elementen van de pagina kunnen verbergen en tonen. Zoals gewoonlijk, beginnen we met iets eenvoudigs, en zullen we geleidelijk complexer worden.

Laten we om op te warmen een alinea en twee knoppen hebben:

<p id="elem">tekst</p>
<input type="submit" id="show" value="tonen">
<input type="submit" id="hide" value="verbergen">

Laten we verwijzingen naar onze elementen in variabelen krijgen:

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

Laten we nu ervoor zorgen dat bij een klik op de ene knop onze alinea wordt verborgen, en op de andere - wordt getoond. We zullen hiervoor de bijbehorende CSS-klasse aan het element geven of verwijderen:

.hidden {
	display: none;
}

Laten we onze taak oplossen:

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

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

Pas mijn code zo aan dat er slechts één knop is. Laat bij de eerste klik op deze knop het element verschijnen, en bij de tweede - verdwijnen.