I'm attempting to use a Bootstrap 4 event to collapse expanded lists in a nav so that only one list is expanded at a time. However, this list is hierarchical in that list items can contain lists.
This code only works for the first level. However, if I select a sub list, it collapses the parent of the expanding list.
$('#sidebar ul ul').on('show.bs.collapse', function () {
let expandedNode = $(this);
let parents = expandedNode.parentsUntil("#sidebar");
//let children = expandedNode.children();
$("#sidebar ul.show").each(function (idx) {
if ($(this) !== expandedNode && $.inArray($(this), parents) == -1)
$(this).collapse('hide');
});
});
How can I modify this event handler so that it will leave the parent of a child list that is expanding, expanded? Another way to explain it is that i want to use nested lists like an accordion.
If you want to push on a button and toggle on every collapse you can do something like this: