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:

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

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>

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:

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

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:

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

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:

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

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