Как сделать первый элемент у аккордиона откртым?

Question

Не могу сделать первый элемент у аккордиона открытым , по клику чтобы потом закрывался и т.д

const accordions = document.querySelectorAll(".accordion");

if(accordions) {
    const openAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.add("open");
        content.style.maxHeight = content.scrollHeight + "px";
    };
    
    const closeAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.remove("open");
        content.style.maxHeight = null;
    };
    
    accordions.forEach((accordion) => {
        const intro = accordion.querySelector(".accordion__control");
        const content = accordion.querySelector(".accordion__content");
    
        intro.onclick = () => {
            if (content.style.maxHeight) {
                closeAccordion(accordion);
            } else {
                accordions.forEach((accordion) => closeAccordion(accordion));
                openAccordion(accordion);
            }
        };
    });
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    -webkit-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    
}

                <ul class="">
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                </ul>

Answer 1

Чтобы сделать первый элемент аккордеона открытым при загрузке страницы и добавить возможность его закрытия по клику, необходимо немного изменить ваш скрипт. Мы добавим функцию для открытия первого элемента и скорректируем обработчик событий, чтобы учесть текущий открытый элемент. Вот обновленный скрипт:

document.addEventListener("DOMContentLoaded", () => {
const accordions = document.querySelectorAll(".accordion");

if (accordions) {
    const openAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.add("open");
        content.style.maxHeight = content.scrollHeight + "px";
    };

    const closeAccordion = (accordion) => {
        const content = accordion.querySelector(".accordion__content");
        accordion.classList.remove("open");
        content.style.maxHeight = null;
    };

    // Открываем первый элемент при загрузке
    openAccordion(accordions[0]);

    accordions.forEach((accordion) => {
        const intro = accordion.querySelector(".accordion__control");
        const content = accordion.querySelector(".accordion__content");

        intro.onclick = () => {
            if (content.style.maxHeight) {
                closeAccordion(accordion);
            } else {
                accordions.forEach((acc) => closeAccordion(acc));
                openAccordion(accordion);
            }
        };
    });
}
});

.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    -webkit-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    
}

                <ul class="">
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                    <li class="accordion">
                        <button class="accordion__control" aria-expanded="false">
                            кнопка
                        </button>
                        <div class="accordion__content" aria-hidden="true">
                            <div class="">
                                контент
                            </div>
                        </div>
                    </li>
                </ul>

БЛОГ НА HUSL

Как сделать первый элемент у аккордиона откртым?

Ответы (1 шт):