Как сделать так чтобы скопированные кнопки работали?

Question

[losos_lapolosos]

Здравствуйте, возникла проблема! Повесил на кнопку действие - скрывать и показывать блок. Все работает хорошо, но при копировании этой кнопки, работает только первая.
Выделенная часть работает, а остальные нет:


Html у всех 3 блоков:

<div class="anwser">
				<div class="obolochka">
					<div class="anwserTitle">
						<h3>Какой состав у пледа?</h3>
					</div>
					<div class="arrows">
						<a class="btn"><img src="img/arrow.png" alt=""></a>
					
						<a  class="btnTwo"><img src="img/arrowUp.png" alt=""></a>
					</div>
				</div>
				<div class="hidden_info">
					<p>Наши пледы на 100% состоят из экологически чистых материалов. 
					Пледы флисовый кубик и пледы с длинным ворсом - полностью гипоалергенные и безопасные для использования. Обладают высокой оздухопроницаемостью, легко стираються и е выцветают. </p>
				</div>
			</div>

CSS у всех 3 блоков:

.anwser{
	background: #D1DBF5;
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.15);
	margin: 0 auto;
	width: 80%;
	padding: 30px;
	border-radius: 10px;
	margin-bottom: 20px;
}

.obolochka{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
}

.anwserTitle{
	font-size: 24px;
}

.arrows{
	margin-top: 10px;
}

.arrows .btnTwo{
	display: none;
}

.arrows a{
	cursor: pointer;
}

.hidden_info{
	display: none;
}

.hidden_info p{
	font-family: 'Futura PT Book';
	margin-top: 20px;
}

JS у всех 3 блоков:

let block = document.querySelector(".hidden_info");
	let btn = document.querySelector(".btn");
	let btnTwo = document.querySelector(".btnTwo");

	btn.onclick = function (){
		block.style.display = "block";
		btn.style.display = "none";
		btnTwo.style.display = "inline";
	}
	btnTwo.onclick = function (){
		block.style.display = "none";
		btn.style.display = "inline";
		btnTwo.style.display = "none";
	}

Comments

[Сергей delphinpro]

вот только что спрашивали - Как сделать чтобы этот скрипт работал ко всем классам?

Answer 1

[Шохрух Шаймардонов]

Так вы и вешаете обработчик только на первый элемент.
document.querySelector(someSelector) - возвращает первое вхождение элемента (если найдется такой), он равносилен document.querySelectorAll(someSelector)[0]

Вам нужно с помощью document.querySelectorAll(someSelector) найти все элементы и циклом их прогнать

Comments

[losos_lapolosos]

Спасибо!!!

[losos_lapolosos]

Нет, что - то не получается. Можете мне написать как это примернов выыглядит?

[Somewhere Intech]

losos_lapolosos,

for (var element of document.querySelectorAll('.answer') )
	let block = element.querySelector(".hidden_info");
  let btn = element.querySelector(".btn");
  let btnTwo = element.querySelector(".btnTwo");

  btn.onclick = function (){
    block.style.display = "block";
    btn.style.display = "none";
    btnTwo.style.display = "inline";
  }
  btnTwo.onclick = function (){
    block.style.display = "none";
    btn.style.display = "inline";
    btnTwo.style.display = "none";
	}
  }

[losos_lapolosos]

Johnny Lowhunter, Спасибо, теперь всё работает!