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

Question

[lychak_vlad]

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

(Не обращайте внимание на оформление, в codepen странно стили отображает)
https://codepen.io/lychakvlad/pen/xxjJdbr

Answer 1

[Dino Winchester]

Если немного подправить ваш скрипт, то можно сделать так:

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);
  }

Comments

[lychak_vlad]

Все работает в точности как надо, спасибо большое!
Знаний пока не хватает, что бы точно понять что именно зачем идет в вашем коде, но надеюсь скоро буду это спокойно читать!)