Elementin piilottamiseen ja näyttämiseen käytettävät painikkeet JavaScriptillä

Tässä osiossa opimme piilottamaan ja näyttämään sivuston elementtejä. Kuten yleensä, aloitamme jostain yksinkertaisesta ja asteittain monimutkaistamme.

Lämmittelynä olkoon meillä kappale ja kaksi painiketta:

<p id="elem">teksti</p>
<input type="submit" id="show" value="näytä">
<input type="submit" id="hide" value="piilota">

Haetaan viittaukset elementteihimme muuttujiin:

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

Tehdään nyt niin, että napsauttamalla toista painiketta kappaleemme piilotetaan ja toista - näytetään. Annetaan tai poistetaan tätä varten elementistä vastaava CSS-luokka:

.hidden {
	display: none;
}

Ratkaistaan tehtävämme:

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

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

Muokkaa koodiani siten, että on vain yksi painike. Ensimmäisellä napsautuksella tätä painiketta elementti näytetään ja toisella - piilotetaan.