Keep open dropdown menu items in panel menu

1

I’m trying to implement a menu with a dropdown submenu in my left-panel. I’ve tried this with a toggleClass() function to hide/unhide the submenu. The problem is that after the opening op the submenu, the panel seems to refresh and reverts to its original state. Is there a way to circumvent this/make it work in another way?

Example:

<li id="diagnose">
    <a href="/diagnose/" class="panel-close item-link item-content">
        <div class="nav-link-header genexis-icon-diagnose" data-i18n="nav.diagnose"></div>
    </a>
</li>

<li id="">
    <div onclick="openAdvancedSubmenu()">
        <div class="nav-link-header genexis-icon-configure" data-i18n="nav.advancedoptions"></div>
    </div>

    <ul id="advanced-submenu" class="hide">
        <li>
            <a href="/removedevicepage/" class="panel-close item-link item-content pl-0 pb-3">
                <div class="nav-link-header genexis-icon-remove" data-i18n="remove.removedevice"></div>
            </a>
        </li>
        <li>
            <a href="/rebootpage/" class="panel-close item-link item-content pl-0 pb-3">
                <div class="nav-link-header genexis-icon-reboot" data-i18n="configure.reboot"></div>
            </a>
        </li>
        <li>
            <a href="/accountmanagement/" class="panel-close item-link item-content pl-0 pb-3">
                <div class="nav-link-header genexis-icon-person" data-i18n="configure.accounts"></div>
            </a>
        </li>
    </ul>
</li>

<li id="about">
    <a href="/about/" class="panel-close item-link item-content">
        <div class="nav-link-header genexis-icon-about" data-i18n="nav.about"></div>
    </a>
</li>

Code:
var openAdvancedSubmenu = function (e) {
$("#advanced-submenu").toggleClass(“hide”);
e.preventDefault();
};