Открытие блока toggle-box

<div class="page-box box-collapse j-box-collapse <?php if (isset($_COOKIE["coockie-name"])) echo $_COOKIE["coockie-name"] === 'open' ? 'open' : ''; ?>" data-box-name="coockie-name">
    <div class="box-header box-toggler j-box-toggler">
        <span class="box-header__title">Настройки конфигурации</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="box-header__icon box-toggler__icon">
            <path d="M7.29414 3.2937C7.68477 2.90308 8.31914 2.90308 8.70977 3.2937L14.7098 9.2937C15.1004 9.68433 15.1004 10.3187 14.7098 10.7093C14.3191 11.1 13.6848 11.1 13.2941 10.7093L8.00039 5.41558L2.70664 10.7062C2.31602 11.0968 1.68164 11.0968 1.29102 10.7062C0.900391 10.3156 0.900391 9.6812 1.29102 9.29058L7.29102 3.29058L7.29414 3.2937Z" fill="black"/>
        </svg>
    </div>
    <!-- /.content-header -->
    <div class="box-content">
        <div class="box-content__wrapper">
            <?= $this->render($cmsConfigurationView, ['menu' => $configurationMenu])?>
        </div>
        <!-- /.box-content__wrapper -->

    </div>
    <!-- /.box-content -->
</div>
<!-- /.page-box -->

.box-collapse.box-open .box-content {
    animation: box-collapse-open 3s;
}

.box-collapse.box-close .box-content {
    max-height: 0;
    height: auto;
    animation: box-collapse-close 0.35s;
 }

.box-collapse.open .box-toggler__icon {
    transform: rotate(180deg);
}


@keyframes box-collapse-open {
    from {
        height: 0;
        max-height: 0;
    }
    to {
        height: 100%;
        max-height: 20000px;
    }
}

@keyframes box-collapse-close {
    from {
        height: 100%;
        max-height: 20000px;

    }
    to {
        height: 0;
        max-height: 0;
    }
}

(function () {
    const containerClass = '.j-box-collapse';
    const togglerClass = '.j-box-toggler';


    //init Elements
    const container = document.querySelector(containerClass);
    const togglers = Array.from(document.querySelectorAll(togglerClass));

    if (!container) return;

    togglers.forEach((item) => {
        item.addEventListener('click', () => {
            let box = item.closest(containerClass);
            let boxName = box.dataset.boxName;

            if(box.classList.toggle('open')) {
                setCookie(boxName, 'open', Date.now() + 60 * 60 * 24 * 365);
                box.classList.remove('box-close');
                box.classList.add('box-open')
            } else {
                setCookie(boxName, 'closed', Date.now() + 60 * 60 * 24 * 365);
                box.classList.add('box-close')
                box.classList.remove('box-open')
            }

        });
    });

})();