Module «collapse». bootstrap collapse based

Демо:

https://codepen.io/ildar-meyker/pen/GRwRzxK

Плагины:

https://jquery.com/

https://getbootstrap.com/docs/4.0/components/collapse/

Подключение:

// main.js

import "../../node_modules/bootstrap/js/dist/collapse";

Разметка:

//

<button class="js-collapse-btn" data-target="#box">
    Toggle
</button>

<div id="box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos consectetur non, labore ea id cum exercitationem distinctio adipisci sunt, dolor neque nisi? Dignissimos iusto, aperiam blanditiis illo reiciendis debitis deleniti.
</div>

Стили:

// vendor/bootstrap-collapse.scss

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

tr.collapse.show {
    display: table-row;
}

tbody.collapse.show {
    display: table-row-group;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

Инициализация:

// modules/collapse.js

function handleBtnClick(e) {
    e.preventDefault();

    const isActive = $(this).hasClass("active");
    const target = $(this).data("target");
    const isCollapsing = $(target).hasClass("collapsing");

    if (isCollapsing) return;

    $(this).toggleClass("active", !isActive);
    $(target).collapse(isActive ? "hide" : "show");
}
$(function () {
    $(document).on("click", ".js-collapse-btn", handleBtnClick);
});