Viacero prvkov s tlačidlami zobrazenia v JavaScripte

Nech teraz máme viacero odsekov a každý má svoje tlačidlo pre skrytie:

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

Urobme tak, aby po kliknutí na tlačidlo sa skryl alebo zobrazil príslušný odsek k nemu.

Na to potrebujeme nejakým spôsobom spojiť tlačidlá s našimi odsekmi. Na to existuje niekoľko spôsobov.

Prvý spôsob

Spojme tlačidlá a odseky nasledovným spôsobom:

<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>

Teraz po kliknutí na ľubovoľné tlačidlo budeme čítať obsah jeho atribútu data-elem a hľadať odsek s takýmto id. Ten budeme prepínať. Realizujme opísané:

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

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

Preštudujte si moje riešenie a potom samostatne, nezerajúc sa do môjho kódu, vyriešte túto úlohu.

Druhý spôsob

Umiestňovať id a data-atribúty nie je veľmi pohodlné. Urobme tak, aby spojenie balo podľa poradového čísla: nech prvé tlačidlo skryje prvý odsek, druhé tlačidlo - druhý a tak ďalej.

Realizujme opísané:

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

Preštudujte si moje riešenie a potom samostatne, nezerajúc sa do môjho kódu, vyriešte túto úlohu.

Tretí spôsob

Ako je vidieť, odsek spojený s tlačidlom, je jeho susedom naľavo. Toto sa dá použiť ako spojenie:

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

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

Preštudujte si moje riešenie a potom samostatne, nezerajúc sa do môjho kódu, vyriešte túto úlohu.