Butonat për fshehjen dhe shfaqjen e elementit në JavaScript

Në këtë seksion do të mësojmë të fshehim dhe të shfaqim elementët e faqes. Si zakonisht, do të fillojmë me diçka të thjeshtë, dhe gradualisht do ta ndërlikojmë.

Le të kemi për ngrohje një paragraf dhe dy butona:

<p id="elem">tekst</p>
<input type="submit" id="show" value="shfaq">
<input type="submit" id="hide" value="fsheh">

Le të marrim lidhjet me elementët tanë në variabla:

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

Tani le të bëjmë që me klikim në një buton paragrafi ynë të fshihet, dhe me tjetrin - të shfaqet. Për këtë do t'i japim ose do të heqim nga elementi klasën përkatëse CSS:

.hidden {
	display: none;
}

Le të zgjidhim detyrën tonë:

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

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

Modifikoni kodin tim në mënyrë që të ketë vetëm një buton. Le të themi që me klikimin e parë në këtë buton elementi të shfaqet, dhe me të dytin - të fshihet.