I am using a HTML template called Metronic to build a backend for myself. This HTML template offers the possibility to collapse the sidebar in the template I choose. However, the sidebar doesn't keep her state.
Here you can test the template: https://keenthemes.com/metronic/preview/?page=index&demo=default
I want to program it so the sidebar keeps here state when reloading the page. I already found some solutions with the plugin called js.cookie
to save the state of the sidebar menu at the clients computer.
However, the problem I am facing is I really don't know which class or id I have to call in order to get the current state of the sidebar and depending on this state and the state saved to the cookie, toggle the sidebar...
This is what I have tried so far: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
My code so far:
<script>
var last=$.cookie('menuToggled');
console.log(last);
if (last!=null) {
//remove default collapse settings
$("#page-sidebar-menu-ul").removeClass('page-sidebar-menu-closed');
//show the last visible group
$("#"+last).collapse("show");
}
$("#page-sidebar-menu").bind('shown', function() {
$.cookie('menuToggled', "page-sidebar-menu")
});
</script>
I have assigned the id page-sidebar-menu
and page-sidebar-menu-ul
to my template. On the page linked above the id page-sidebar-menu
is m_ver_menu
and the id page-sidebar-menu-ul
is the ul
element followed by the id m_ver_menu
.
I would appreciate any kind of help. Thank You!