What is the best way to open and close elements?

D

Dimon3x2019-09-30 07:21:01

iOS

Dimon3x, 2019-09-30 07:21:01

I made the code, it works completely, is it possible to improve it somehow?
Govnokod or go?
If you remove closeAnswer, then the remaining open elements will not close themselves, but only the element that I click on will close.
You can poke 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>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

A

Alexander, 2018-06-03
@Nexelen

Do some searching... https://github.com/yoavlt/LiquidFloatingActionButton

D

doublench21, 2018-06-03
@doublench21

Writing such animations by hand is quite problematic and difficult. All these renders are done quite simply using say Lottie or QuartzCode,
https://medium.com/@christopherdeane/native-app-an...
www.quartzcodeapp.com

M

Maxim Cheryabushkin, 2019-09-30
@Floatname

If you just need to get the final implementation, then you can fasten the bootstrap accordion component. Well, this is unless the task is to write it yourself in pure js :)
https://getbootstrap.com/docs/4.3/components/colla...