Suppose I have the following simple <p:panelMenu>
.
<p:panelMenu style="width:200px">
<p:submenu label="Contents">
<p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
</p:submenu>
<p:separator />
<p:submenu label="Users">
<p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
</p:submenu>
</p:panelMenu>
Once a sub menu is expanded should remain expanded until it is explicitly collapsed even after a page refresh.
Similarly, sometime later, if the sub menu is collapsed should remain collapsed until it is explicitly expanded even after the page reloaded/refreshed. Is this possible?
By the way, the following script expands a <p:panelMenu>
by default (all <p:submenu>
).
$(document).ready(function(){
$(".ui-panelmenu-content").css("display","block");
$(".ui-panelmenu-header").addClass("ui-state-active");
$(".ui-icon-triangle-1-e").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
});
And the following script expands the first sub menu of <p:panelMenu>
, if it is collapsed.
var isMenuExpanded = jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible');
if(!isMenuExpanded)
{
jQuery('.ui-panelmenu-panel a').first().click();
}
Best Answer
Set every value item with ids and also with class to the click response
set localstorage as global variable (index)
variables session with localstorage javascript
every page refresh, get the localstorage variable session to change the menu state
the click event to set the localstorage variable session