У меня есть такой код. Он должен работать по принципу когда кликаешь на подробнее открываются блоки у которых общих родитель. И я могу это сделать с одним блоком, но нужно что бы были классы и они находили общего родителя и применялись внутри родителя. Я это понимаю но не могу правильно написать синтаксис. То есть кликнул на подробнее он открыл блоки в который общий родитель
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wraper {
}
.blok_1 {
font-size: 18px;
}
.blok_2 {
font-size: 18px;
}
.blok_2_1 {
}
.blok_2_2 {
color: tomato;
cursor: pointer;
text-decoration: underline;
}
.blok_3 {
font-size: 14px;
}
.blok_4 {
font-size: 14px;
}
.vlya_svoih{
display: none;
}
</style>
</head>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<br><br><br><br>
<div class="wraper">
<div class="blok_1">
Данные 1
</div>
<br><br>
<div class="blok_2">
<div class="blok_2_1">Заголовок</div>
<div class="blok_2_2">Подробнее</div>
</div>
<br><br>
<div class="blok_3">Этот блок нужно скрыть 1</div>
<div class="blok_4">Этот блок нужно скрыть 2</div>
</div>
<body>
<script>
let podrobnee = document.querySelector(".blok_2_2");
let blok_3 = document.querySelector(".blok_3");
let blok_4 = document.querySelector(".blok_4");
let podrobnee_fun = () => {
blok_3.classList.toggle('vlya_svoih');
blok_4.classList.toggle('vlya_svoih');
}
podrobnee.addEventListener("click", podrobnee_fun);
</script>
</body>
</html>