template-for-verstka/assets/js/toggle.js

const rootSelectorToggles = '[data-js-toggle]';

class Toggle{
    // элементы для поиска
    selectors = {
        root: rootSelectorToggles,
        button: '[data-js-toggle-button]',
        wrapper: '[data-js-toggle-wrapper]',
        content: '[data-js-toggle-content]',
    }
    // класс отображения состояния
    stateClasses = {
        isActive: 'active',
    }

    constructor(rootElement){
        this.rootElement = rootElement;
        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
        this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
        this.state = {
            activeToggleIndex: [...this.buttonElements]
                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
        };
        this.bindEvents();
    }

    updateUI(newHeight){
        const { activeToggleIndex } = this.state;

        this.buttonElements.forEach((buttonElement, index) => {
            const isActive = index === activeToggleIndex;

            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
        })

        this.wrapperElements.forEach((wrapperElement, index) => {
            const isActive = index === activeToggleIndex,
                  newHeight = this.contentElements[index].offsetHeight;

            wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);

            if (isActive) {
                console.log(this.contentElements[index]);
                
                wrapperElement.style.height = `${newHeight}px`;

                setTimeout(() => {
                    if (wrapperElement.classList.contains('active')) {
                        wrapperElement.style.height = `auto`;
                    }
                }, 300);
            }else{
                wrapperElement.style.height = `${newHeight}px`;

                setTimeout(() => {
                    if (!wrapperElement.classList.contains('active')) {
                        wrapperElement.style.height = `${0}px`;
                    }
                }, 10);
            }
        })

    }

    onButtonClick(buttonIndex){
        this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;

        this.updateUI();
    }

    bindEvents(){
        this.buttonElements.forEach((buttonElement, index) => {
            buttonElement.addEventListener('click', () => this.onButtonClick(index))
        })
    }
}

class TogglesCollection{    
    constructor(){
        this.init();
    }

    init(){
        document.querySelectorAll(rootSelectorToggles).forEach((element) => {
            new Toggle(element);
        });
    }
}

export default TogglesCollection;