@losos_lapolosos

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

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

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";
	}
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
joeberetta
@joeberetta
1. Муж; 2. Fullstack разработчик; 3. Студент
Так вы и вешаете обработчик только на первый элемент.
document.querySelector(someSelector) - возвращает первое вхождение элемента (если найдется такой), он равносилен document.querySelectorAll(someSelector)[0]

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы