zz27.www@yandex.ru,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.response {
display: none;
}
.response.open {
display: block;
}
</style>
</head>
<body>
<div class="question">question1</div>
<div class="question">question2</div>
<div class="question">question3</div>
<div class="question">question4</div>
<div class="question">question5</div>
<div class="response">response1</div>
<div class="response">response2</div>
<div class="response">response3</div>
<div class="response">response4</div>
<div class="response">response5</div>
<script>
class Animate{
constructor(questions, responses){
this.questions = questions;
this.responses = responses;
this.click();
}
click(){
this.questions.forEach((el,i) => el.addEventListener('click', () => this.responses[i].classList.add('open')))
}
}
let questions = document.querySelectorAll('.question');
let responses = document.querySelectorAll('.response');
const animate = new Animate(questions, responses);
</script>
</body>
</html>