html5 - how to keep toggle state after page refresh -

html5 - how to keep toggle state after page refresh -

i have expandable menu, can see code in this link..

my question how can maintain toggle state after page refresh.

thanks helps.

how save in session variable?

session("topmenustate") = xyz

where xyz state info

update

mmmmm seek , explain best can limited amount of javascript skills.

to check if local storage/session storage available follows

if(typeof(storage)!=="undefined") { // localstorage , sessionstorage supported } else { // localstorage , sessionstorage not supported }

once satisfied local storage available can go on coding actual scripts, otherwise, 1 assume maybe code not work?

further more when user clicks on link in sliding menu, thought persist name of menu he/she clicked on, , when page loads, or when render menu's can check session/local storage see menu item (if any) clicked on

so in links in sliding menu may end along lines of :

<div class="menucontent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a> <ul id="nav"> <li><a href="#"><img src="images/t1.png" /> home</a></li> <li> <ul id="1"> <li><a href="#"><img src="images/empty.gif" />link 1</a></li> <li><a href="#"><img src="images/empty.gif" />link 2</a></li> <li><a href="#"><img src="images/empty.gif" />link 2</a></li> <li><a href="#"><img src="images/empty.gif" />link 3</a></li> <li><a href="#"><img src="images/empty.gif" />link 4</a></li> </ul> // line modified <span onclick="processmenulink('menuitem1')" class="sub" tabindex="1"><img src="images/t2.png" />html/css</span> </li> <li> <ul id="2"> <li><a href="#"><img src="images/empty.gif" />link 6</a></li> <li><a href="#"><img src="images/empty.gif" />link 7</a></li> <li><a href="#"><img src="images/empty.gif" />link 8</a></li> <li><a href="#"><img src="images/empty.gif" />link 9</a></li> <li><a href="#"><img src="images/empty.gif" />link 10</a></li> </ul> // line modified <span onclick="processmenulink('menuitem2')" class="sub" tabindex="1"><img src="images/t3.png" />jquery/js</span> </li> <li><a href="#"><img src="images/t2.png" />php</a></li> </ul> </div>

please note: javascript skills arelimited may need check code! missing semicolon here , there.

and in subroutine or function may have along lines of:

void processmenulink(menuitemid){ if(typeof(storage)!=="undefined") { // localstorage , sessionstorage supported //if menuitem selected valid if (menuitemid == 1) { //save selected menu id/name localstorage.myselectedmenuitem=menuitemid; // optional - phone call toggle subroutine toggle selected menuitems // code phone call sliding routine if not executed via class parameter } } else { // localstorage , sessionstorage not supported } }

now @ point have saved selected menu item in local storage , assume page reloads.

so when page loads want phone call subroutine performs menu animation or sliding , pass relevant value based upon locally-stored selected menuitem value.

sub window.onload //load locally stored info if (localstorage.myselectedmenuitem == 'menuitem1') { // menu item id 'menuitem1' selected phone call sliding routine // using whatever value used identify first sliding menu } else { if (localstorage.myselectedmenuitem == 'menuitem2') { // menu item id 'menuitem2' selected phone call sliding routine // using whatever value used identify first sliding menu } else { // nil selected or invalid selection specified // show menu items in default state } } end sub

i'm not sure how call/execute function in javascript

well can apologise weak java skills coming vb background,

but hope got gist of meaning , helps address issue.

html5 local-storage