Animating height auto (HTML + CSS + JS)

animating_height_auto.html

<section class="section">
    <div class="container">
        <div class="section__item item">
            <div class="item__button">Click btn</div>
            <div class="item__content">
                <div class="item__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatum minus ipsum quas, eum ad inventore perferendis maiores distinctio nisi maxime sunt numquam veniam, tempore. Id error deleniti, odio atque.</div>
            </div>
        </div>
        <div class="section__item item">
            <div class="item__button">Click btn</div>
            <div class="item__content">
                <div class="item__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatum minus ipsum quas, eum ad inventore perferendis maiores distinctio nisi maxime sunt numquam veniam, tempore. Id error deleniti, odio atque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus voluptatum minus ipsum quas, eum ad inventore perferendis maiores distinctio nisi maxime sunt numquam veniam, tempore. Id error deleniti, odio atque.</div>
            </div>
        </div>
    </div>
</section>

<style>
body {
    background: #121212;
    color: #fff;
    --main: #6d6de4;
    --main-darken: var(--main);
}
.section__item[data-open="true"] {
    --main-darken: #4c4cdd;
}
.section__item:not(:last-child) {
    margin-bottom: 30px;
}
.container {
    max-width: 1140px;
    padding: 0 30px;
    margin: 0 auto;
}
.item__button {
    font-weight: bold;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    min-height: 60px;
    cursor: pointer;
    background: var(--main-darken);
    transition: 0.6s;
}
.item__content {
    /* Обязательные стили */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}
.item__body {
    padding: 30px;
    background: var(--main);
    transition: 0.6s;
    line-height: 1.8;
    font-size: 16px;
}
</style>

<script>
const smoothHeight = (containerSelector, buttonSelector, contentSelector) => {
    const containerList = document.querySelectorAll(containerSelector);

    if (!containerList.length) return false;

    containerList.forEach(container => {
        const innerBtn = container.querySelector(buttonSelector);
        const innerContent = container.querySelector(contentSelector);

        innerBtn.addEventListener('click', buttonClickHandler.bind(null, container, innerContent));
        window.addEventListener('resize', resizeHandler.bind(null, container, innerContent));
    });
}

function buttonClickHandler(container, content) {
    if (container.dataset.open !== 'true') {
        container.dataset.open = 'true';
        content.style.maxHeight = `${content.scrollHeight}px`;
    } else {
        container.dataset.open = 'false';
        content.style.maxHeight = '';
    }
};

function resizeHandler(container, content) {
    const isContentOpened = container.dataset.open === 'true';
    const isContentHeightChanged = parseInt(content.style.maxHeight) !== content.scrollHeight;
    if (isContentOpened && isContentHeightChanged) {
        content.style.maxHeight = `${content.scrollHeight}px`;
    }
};

smoothHeight('.section__item', '.item__button', '.item__content');
</script>