ელემენტის დამალვის და ჩვენების ღილაკები JavaScript-ზე

ამ განყოფილებაში ჩვენ ვისწავლით გვერდის ელემენტების დამალვას და ჩვენებას. როგორც ყოველთვის, დავიწყოთ რაღაც მარტივით, და თანდათან გავართულოთ.

გასახანგრძლივებლად მოდით გვქონდეს აბზაცი და ორი ღილაკი:

<p id="elem">ტექსტი</p>
<input type="submit" id="show" value="ჩვენება">
<input type="submit" id="hide" value="დამალვა">

მივიღოთ ბმულები ჩვენს ელემენტებზე ცვლადებში:

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

ახლა მოდით გავაკეთოთ ისე, რომ ერთ ღილაკზე დაწკაპუნებით ჩვენი აბზაცი დაიმალოს, ხოლო მეორეზე - გამოჩნდეს. ამისთვის მივცეთ ან ავიღოთ ელემენტისგან შესაბამისი CSS კლასი:

.hidden {
	display: none;
}

გადავჭრათ ჩვენი ამოცანა:

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

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

შეცვალეთ ჩემი კოდი ისე, რომ იყოს მხოლოდ ერთი ღილაკი. პირველი დაწკაპუნებით ამ ღილაკზე ელემენტი გამოჩნდეს, ხოლო მეორეზე - დაიმალოს.