Više elemenata sa dugmadima za prikaz na JavaScript-u

Pretpostavimo sada da imamo više pasusa i da svaki od njih ima svoje dugme za sakrivanje:

html<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

Učinimo da klikom na dugme bude sakriven ili prikazan odgovarajući pasus.

Da bismo to postigli, moramo nekako da povežemo dugmad sa našim pasusima. Za to postoji nekoliko načina.

Prvi način

Povežimo dugmad i pasuse na sledeći način:

html<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

Sada ćemo klikom na bilo koje dugme čitati sadržaj njegovog atributa data-elem i tražiti pasus sa tim id-jem. Njega ćemo i toggle-ovati. Implementirajmo opisano:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

Drugi način

Raspoređivanje id-jeva i data-atributa nije baš zgodno. Hajde da napravimo da veza bude prema rednom broju: neka prvo dugme sakrije prvi pasus, drugo dugme - drugi i tako dalje.

Implementirajmo opisano:

javascriptlet buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    elems[i].classList.toggle('hidden');
  });
}

Treći način

Kao što se može videti, pasus povezan sa dugmetom, nalazi se levo od njega kao sused. To se može iskoristiti kao veza:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    this.previousElementSibling.classList.toggle('hidden');
  });
}