Сделал код, полностью работает, можно ли как то его улучшить?
Говнокод или пойдёт?
Если убрать closeAnswer то остальные открытые элементы не будут сами закрываться, а будет закрываться только тот элемент, на который кликну.
Можно потыкать
https://plnkr.co/edit/Tkp3xcf8T0nKYh8ykgvC?p<!DOCTYPE html>
<html>
<head>
<style>
.answer-index {
display: none;
}
</style>
<script src="script.js"></script>
</head>
<body>
<div class="box-question">
<div class="question">
<div class="additionally">
<a href="#">Показать ответ 1</a>
</div>
</div>
<div class="answer answer-index">
Этот текст открывается и закрывается
</div>
</div>
<div class="box-question">
<div class="question">
<div class="additionally">
<a href="#">Показать ответ 2</a>
</div>
</div>
<div class="answer answer-index">
Этот текст открывается и закрывается
</div>
</div>
<div class="box-question">
<div class="question">
<div class="additionally">
<a href="#">Показать ответ 3</a>
</div>
</div>
<div class="answer answer-index">
Этот текст открывается и закрывается
</div>
</div>
</body>
</html>
<code lang="javascript">
function closeAnswer() {
var allAnswers = document.querySelectorAll('.answer');
allAnswers.forEach(function (answer, i) {
answer.classList.add('answer-index');
})
}
document.documentElement.addEventListener('click', function (event) {
var target = event.target;
if (target.classList.contains("button-answer")) {
var question = target.closest('.box-question');
var answer = question.querySelector('.answer');
if (answer.classList.contains('answer-index')) {
closeAnswer()
answer.classList.toggle('answer-index');
} else {
answer.classList.toggle('answer-index');
}
}
});
</code>
