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

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

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

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

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

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

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

css.hidden {
  display: none;
}

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

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

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