@lychak_vlad

Как убрать закрытие вкладки аккордеона при нажатии на кнопку?

1. Как сделать, чтобы вкладка аккордеона не закрывалась при нажатии на кнопку в блоке accordion__content?
2. Как сделать, чтобы при открытии одной вкладки аккордеона, закрывалась другая открытая?

(Не обращайте внимание на оформление, в codepen странно стили отображает)
https://codepen.io/lychakvlad/pen/xxjJdbr
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
mizutsune
@mizutsune
Frontend Developer
Если немного подправить ваш скрипт, то можно сделать так:

const accordions = document.querySelectorAll('.accordion');
const accordionsButtons = document.querySelectorAll(".accordion__tittle")
const accordionsDataboxes =  document.querySelectorAll(".accordion__content");

accordions.forEach(n => {
     const currentButton = n.querySelector(".accordion__tittle");
     const currentDatabox = n.querySelector(".accordion__content");

     const toggleActiveElements = () => {
          accordionsButtons.forEach(v => {
               if (v !== currentButton) {
                    v.classList.remove("open");
               }
          });

          accordionsDataboxes.forEach(v => {
               if (v !== currentDatabox) {
                    v.classList.remove("open");
                    v.style.setProperty("--height", "0px");
               }
          });

          currentButton.classList.toggle("open");
          currentDatabox.classList.toggle("open");

          currentDatabox.classList.contains("open")
               ? currentDatabox.style.setProperty("--height", `${currentDatabox.scrollHeight}px`)
               : currentDatabox.style.setProperty("--height", "0px");
     };

     currentButton.addEventListener("click", toggleActiveElements);
});


И добавить строчку в CSS:

.accordion__content.open {
    max-height: var(--height, 0);
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы