Bootstrap 4 Collapse active state in localstorage

Question

I'm working on a sidebar menu with collapsible sub-menus, and I want to retain the selection in localstorage. It works for the first item, but I can't see how to keep the sub-menus correctly.

I'm not great with JQuery, so I found another example for BS3 accordions and tried to make it work: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

Here's what I'm doing...

CodePen

JQuery:

$(document).ready(function () {
//when a collapse group is shown, save it as the active collapse group
$("#sidebarmenu").on('show.bs.collapse', function () {
    var active = $("#sidebarmenu .show").attr('id');
    localStorage.setItem('activeCollapseGroup', active);
    alert(active);
});
$("#sidebarmenu").on('hidden.bs.collapse', function () {
    localStorage.removeItem('activeCollapseGroup');
});
var last = localStorage.getItem('activeCollapseGroup');
if (last !== null) {
    //remove default collapse settings
    $("#sidebarmenu .panel-collapse").removeClass('show');
    //show the account_last visible group
    $("#" + last).addClass("show");
}

});

Navigation:

<nav id="sidebar">
            <ul class="list-unstyled components" id="sidebarmenu">
                <li>
                    <a href="https://localhost/user/profile">Profile</a>
                </li>
                <li>
                    <a href="#ManageOrdersSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Manage Orders</a>
                    <ul class="list-unstyled collapse show" id="ManageOrdersSubmenu" style="">
                        <li>
                            <a href="https://localhost/user/orders">List / Search Orders</a>
                        </li>
                        <li>
                            <a href="#">Transfer Domain</a>
                        </li>
                        <li>
                            <a href="#BulkToolsSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Bulk Tools</a>
                            <ul class="list-unstyled collapse show" id="BulkToolsSubmenu" style="">
                                <li>
                                    <a href="#">Bulk Register</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Transfer</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Renew</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Modify Name Servers</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Modify Contacts</a>
                                </li>
                                <li>
                                    <a href="#">Bulk Theft Protection</a>
                                </li>
                                <li>
                                    <a href="#BulkPrivacyProtectionSubmenu" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Bulk Privacy Protection</a>
                                    <ul class="list-unstyled collapse show" id="BulkPrivacyProtectionSubmenu" style="">
                                        <li>
                                            <a href="#">Buy</a>
                                        </li>
                                        <li>
                                            <a href="#">Update</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="active">
                                    <a href="#">Bulk Move Services</a>
                                </li>
                                <li>
                                    <a href="#">Running Bulk Actions</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">New gTLD Wish List</a>
                        </li>
                        <li>
                            <a href="#">Fast Transfer</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#MyBillingSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">My Billing</a>
                    <ul class="list-unstyled collapse" id="MyBillingSubmenu">
                        <li>
                            <a href="https://localhost/user/orders">Summary</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Add Funds</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Locked Funds</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Pending Payments</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">List/Search Transactions</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Search Archived Transactions</a>
                        </li>
                        <li>
                            <a href="https://localhost/user/orders">Withdraw Funds</a>
                        </li>                            
                    </ul>
                </li>
                <li>
                    <a href="#SettingsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">Settings</a>
                    <ul class="list-unstyled collapse" id="SettingsSubmenu">
                        <li>
                            <a href="https://localhost/user/orders">Interface Settings</a>
                        </li>
                        <li>
                            <a href="#SystemNotificationsSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">System Notifications</a>
                            <ul class="list-unstyled collapse" id="SystemNotificationsSubmenu">
                                <li>
                                    <a href="https://localhost/user/orders">Interface Settings</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#DomainSpecificSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">Domain Specific</a>
                            <ul class="list-unstyled collapse" id="DomainSpecificSubmenu">
                                <li>
                                    <a href="https://localhost/user/orders">Contact Management</a>
                                </li>
                                <li>
                                    <a href="https://localhost/user/orders">Default Information</a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </li>
            </ul>
        </nav>

Answer 1

You can save the submenu id as well. You can call it activeCollapseGroupSubmenu in localStorage.

First, you can check inside the active element for another .show class. It is the submenu element. If you find it, store the ID in localStorage.

Then when you check if the localStorage menu ID is in localStorage, you also check for the submenu.

$(document).ready(function() {
  $("#sidebarCollapse").on("click", function() {
    $("#sidebar").toggleClass("active");
  });

  //when a collapse group is shown, save it as the active collapse group
  $("#sidebarmenu").on("shown.bs.collapse", function() {
    var active = $("#sidebarmenu .show");
    var submenuActive = active.find(".show").attr("id");
    localStorage.setItem("activeCollapseGroup", active.attr("id"));
    if (submenuActive) {
      localStorage.setItem("activeCollapseGroupSubmenu", submenuActive);
    }
  });
  $("#sidebarmenu").on("hidden.bs.collapse", function() {
    localStorage.removeItem("activeCollapseGroup");
    localStorage.removeItem("activeCollapseGroupSubmenu");
  });
  var last = localStorage.getItem("activeCollapseGroup");
  var lastSubmenu = localStorage.getItem("activeCollapseGroupSubmenu");
  if (last !== null) {
    //remove default collapse settings
    $("#sidebarmenu .panel-collapse").removeClass("show");
    //show the account_last visible group
    $("#" + last).addClass("show");
    if (lastSubmenu) {
      $("#" + last).find("#" + lastSubmenu).addClass("show");
    }
  }
});