JavaScript'te Öğeyi Gizleme ve Gösterme Düğmeleri

Bu bölümde, sayfa öğelerini nasıl gizleyip göstereceğimizi öğreneceğiz. Her zamanki gibi, basit bir şeyle başlayıp yavaş yavaş karmaşıklaştıracağız.

Isınmak için bir paragraf ve iki düğmemiz olsun:

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

Öğelerimize referansları değişkenlere alalım:

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

Şimdi bir düğmeye tıklandığında paragrafımızın gizlenmesini, diğerine tıklandığında ise gösterilmesini sağlayalım. Bunun için öğeye ilgili CSS sınıfını vereceğiz veya kaldıracağız:

.hidden {
	display: none;
}

Görevimizi çözelim:

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

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

Kodumu, sadece tek bir düğme olacak şekilde değiştirin. Bu düğmeye ilk tıklandığında öğe gösterilsin, ikinci tıklandığında ise gizlensin.