«Как исправить« панель div »в CSS или JavaScript от закрытия

Question

Это касается FAQ-страницы;

Я протестировал некоторый код, когда один div активен, он автоматически не закрывается, когда я нажимаю на другой div , у меня есть знаки - и +, но когда пользователь переходит на другую вкладку .div, предыдущую необходимо закрыть автоматически;

Я пытался добавить много CSS-кода, но я думаю, что они перезаписаны JavaScript, я не сделал JavaScript, но попытался отладить его, и просто мои знания действительно просты по сравнению с HTML и CSS, устранение неполадок в течение двух дней, спасибо заранее!

Ниже приведен код:

  var acc = document.getElementsByClassName("accordion");
                var i;

                for (i = 0; i < acc.length; i++) {
                    acc[i].onclick = function () {
                        this.classList.toggle("active");
                        var panel = this.nextElementSibling;
                        if (panel.style.maxHeight) {
                            panel.style.maxHeight = null;
                        } else {
                            panel.style.maxHeight = panel.scrollHeight + "px";
                        }
                    }
                }

     button.accordion {
                    background-color: #eee;
                    color: #444;
                    cursor: pointer;
                    padding: 18px;
                    width: 100%;
                    border: none;
                    text-align: left;
                    outline: none;
                    font-size: 17px;
                    transition: 0.4s;
                }

                button.accordion.active,
                button.accordion:hover {
                    background-color: #ccc;
                }

                button.accordion:after {

                    content: '\002B';
                    color: #777;
                    font-weight: bold;
                    float: right;
                    margin-left: 10px;
                }

                button.accordion.active:after {
                    content: "\2212";
                }

                div.panel {
                    padding: 0 18px;
                    background-color: white;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.2s ease-out;
                }

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>Title</h1>
      </div>

      <div class="rte">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nobis natus, laboriosam, aperiam alias enim, atque accusantium autem saepe id molestiae animi! Soluta laudantium eaque aspernatur maxime et aut, consequuntur.
      </div>
    </div>
  </div>
</div>

Answer 1

Было бы полезно посмотреть, как выглядит ваш код описания, но если он использует классы accordion и active, это может сработать:

$(document).on('click', '.accordion', () => {
  $('.accordion').removeClass('active');
  $(this).addClass('active');
});

При нажатии .accordion удаляются все.active классы из всех аккордеонов, а затем добавляет их обратно на тот, на который вы нажали.