Muitos elementos com botões de exibição em JavaScript

Suponha que agora temos muitos parágrafos e cada um tem seu próprio botão para ocultar:

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

Vamos fazer com que, ao clicar no botão, o parágrafo correspondente seja ocultado ou exibido.

Para isso, de alguma forma, precisamos vincular os botões aos nossos parágrafos. Existem várias maneiras de fazer isso.

Primeira maneira

Vamos vincular os botões e os parágrafos da seguinte forma:

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

Agora, ao clicar em qualquer botão, vamos ler o conteúdo do seu atributo data-elem e procurar o parágrafo com esse id. É esse que vamos alternar. Vamos implementar o 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');
	});
}

Estude minha solução e, em seguida, por conta própria, sem olhar o meu código, resolva esta tarefa.

Segunda maneira

Não é muito conveniente atribuir ids e data-atributos. Vamos fazer com que a vinculação seja feita pela posição ordinal: deixe o primeiro botão ocultar o primeiro parágrafo, o segundo botão - o segundo e assim por diante.

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

Estude minha solução e, em seguida, por conta própria, sem olhar o meu código, resolva esta tarefa.

Terceira maneira

Como pode ser visto, o parágrafo vinculado ao botão é seu vizinho à esquerda. Podemos usar isso como uma forma de vinculação:

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

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

Estude minha solução e, em seguida, por conta própria, sem olhar o meu código, resolva esta tarefa.