# Много элементов с кнопками показа на JavaScript

Пусть теперь у нас есть много абзацев и у каждого своя кнопка для сокрытия:

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

Сделаем так, чтобы по клику на кнопку скрывался или показывался соответствующий ей абзац.

Для этого нам каким-то образом нужно связать кнопки с нашими абзацами. Для этого существует несколько способов.

## Первый способ

Свяжем кнопки и абзацы следующим образом:

`<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. Его и будем тоглить. Реализуем описанное:

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

Изучите мое решение, а затем самостоятельно, не подсматривая в мой код, решите эту задачу.

## Второй способ

Расставлять id и data-атрибуты не очень удобно. Давайте сделаем так, чтобы связь была по порядковому номеру: пусть первая кнопка скрывает первый абзац, вторая кнопка - второй и так далее.

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

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

Изучите мое решение, а затем самостоятельно, не подсматривая в мой код, решите эту задачу.

## Третий способ

Как можно увидеть, абзац, связанный с кнопкой, является ее соседом слева. Можно это использовать в качестве связи:

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

Изучите мое решение, а затем самостоятельно, не подсматривая в мой код, решите эту задачу.

← →
↑
en ru