Múltiples elementos con botones de mostrar en JavaScript

Supongamos que ahora tenemos múltiples párrafos y cada uno tiene su propio botón para ocultar:

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

Hagamos que al hacer clic en el botón se oculte o se muestre el párrafo correspondiente.

Para esto, necesitamos de alguna manera relacionar los botones con nuestros párrafos. Existen varias formas de hacer esto.

Primer método

Relacionemos los botones y los párrafos de la siguiente manera:

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

Ahora, al hacer clic en cualquier botón, leeremos el contenido de su atributo data-elem y buscaremos el párrafo con ese id. Ese será el que alternaremos. Implementemos lo descrito:

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

Estudia mi solución, y luego por tu cuenta, sin mirar mi código, resuelve este problema.

Segundo método

No es muy conveniente asignar id y atributos data. Hagamos que la relación sea por orden secuencial: que el primer botón oculte el primer párrafo, el segundo botón - el segundo, y así sucesivamente.

Implementemos lo descrito:

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

Estudia mi solución, y luego por tu cuenta, sin mirar mi código, resuelve este problema.

Tercer método

Como se puede observar, el párrafo relacionado con el botón es su vecino anterior (a la izquierda). Podemos usar esto para establecer la relación:

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

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

Estudia mi solución, y luego por tu cuenta, sin mirar mi código, resuelve este problema.