Collapsible Groups

[JohnJVTK]

Hello,

I made changes to add collapsible groups but I don't know how to do a PR.

I added the following code in JS file

document.querySelectorAll("li.group").forEach(function (el) {
        el.insertAdjacentHTML("beforeend", '<span class="caret caret-down pl-1"></span>');
    });

document.querySelectorAll(".caret-container").forEach(function (el) {
        el.addEventListener("click", function () {
            if (el.classList.contains("caret-down")) {
                    el.classList.remove("caret-down");
                    el.classList.add("caret-right");
                }
            else if (el.classList.contains("caret-right")) {
                    el.classList.remove("caret-right");
                    el.classList.add("caret-down");
                }

            const li = el.parentElement;
            if (!li.classList.contains("collapsed"))
                li.classList.add("collapsed");
            else
                li.classList.remove("collapsed");

            let nextSibling = li.nextElementSibling;
            while (nextSibling) {
                nextSibling.style.display = li.classList.contains("collapsed") ? "none" : "list-item";
                nextSibling = nextSibling.nextElementSibling;

                if (nextSibling == null || nextSibling.classList.contains("group")) {
                    break;
                }
            }
        });
    });

and the following in CSS file

.ms-drop ul > li label {
    display: inline-block;
}
.caret-down::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
.caret-right::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-top-width: 0.3em;
    border-top-style: solid;
    border-top-color: transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}

It would be nice if this was added as an option like 'enableCollapsibleGroup' (boolean)

I hope this could be useful for someone and added to the plugin.