Више елемената са дугмадима за приказ на JavaScript

Претпоставимо сада да имамо више пасуса и да сваки има своје дугме за сакривање:

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

Направимо да при клику на дугме буде сакривен или приказан одговарајући пасус.

За ово нам на неки начин треба да повежемо дугмад са нашим пасусима. За ово постоји неколико начина.

Први начин

Повежимо дугмад и пасусе на следећи начин:

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>

Сада ћемо при клику на било које дугме читати садржај његовог атрибута data-elem и тражити пасус са тим id. Њега ћемо и toggle-овати. Реализујмо описано:

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');
  });
}

Други начин

Није баш погодно постављати id и data-атрибуте. Хајде да направимо да веза буде по редном броју: нека прво дугме сакрије први пасус, друго дугме - други и тако даље.

Реализујмо описано:

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');
  });
}

Трећи начин

Као што се може видети, пасус повезан са дугметом, је његов сусед лево. Ово се може искористити као веза:

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

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