how to keep toggle state after page refresh - html

Question

I have expandable menu, you can see the code in this link..
my question is how can I keep toggle state after page refresh.
Thanks for your helps.

Answer 1

How about save it in a session variable?
Session("TopMenuState") = XYZ
where XYZ is your state info
Update
Mmmmm I will try and explain best I can with my limited amount of Javascript skills.
To check if local storage/session storage is available as follows
if(typeof(Storage)!=="undefined")
{
// localStorage and sessionStorage supported
}
else
{
// localStorage and sessionStorage NOT supported
}
Once your satisfied that local storage will be available then you can continue with coding the actual scripts, otherwise, one would assume that maybe the code will not work?
Further more when the user clicks on a link in your sliding menu, the idea is to persist the NAME of the menu he/she clicked on, and when the page loads, or when you render your menu's you can check the session/local storage to see what menu item (if any) was clicked on
So in the links in sliding menu you may end up with something along the lines of :
<div class="menuContent">
<a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li><img src="images/t1.png" /> Home</li>
<li>
<ul id="1">
<li><img src="images/empty.gif" />Link 1</li>
<li><img src="images/empty.gif" />Link 2</li>
<li><img src="images/empty.gif" />Link 2</li>
<li><img src="images/empty.gif" />Link 3</li>
<li><img src="images/empty.gif" />Link 4</li>
</ul>
// THIS LINE MODIFIED
<span onclick="ProcessMenuLink('MenuItem1')" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</span>
</li>
<li>
<ul id="2">
<li><img src="images/empty.gif" />Link 6</li>
<li><img src="images/empty.gif" />Link 7</li>
<li><img src="images/empty.gif" />Link 8</li>
<li><img src="images/empty.gif" />Link 9</li>
<li><img src="images/empty.gif" />Link 10</li>
</ul>
// THIS LINE MODIFIED
<span onclick="ProcessMenuLink('MenuItem2')" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</span>
</li>
<li><img src="images/t2.png" />PHP</li>
</ul>
</div>
PLEASE NOTE: My javascript skills arelimited so you may need to check this code!
It is most likely missing a semicolon here and there.
And then in the subroutine or function you may have something along the lines of:
Void ProcessMenuLink(MenuItemId){
if(typeof(Storage)!=="undefined")
{
// localStorage and sessionStorage supported
//If the menuitem selected is valid
if (MenuItemId == 1) Then
{
//Save the selected menu ID/Name
localStorage.MySelectedMenuItem=MenuItemId;
// OPTIONAL - Call the toggle subroutine to toggle the selected menuitems
// Code to call sliding routine if its not executed via the CLASS parameter
}
}
else
{
// localStorage and sessionStorage NOT supported
}
}
Now at this point you have saved the SELECTED MENU ITEM in the local storage and I assume the page reloads.
So when your page loads you will want to call the subroutine which performs the menu animation or SLIDING and pass it relevant value based upon the locally-stored selected menuitem value.
Sub Window.OnLoad
//load locally stored data
if (localStorage.MySelectedMenuItem == 'MenuItem1')
{
// menu item with id 'MenuItem1' was selected so call the sliding routine
// using whatever value you used to identify your first sliding menu
}
else
{
if (localStorage.MySelectedMenuItem == 'MenuItem2')
{
// menu item with id 'MenuItem2' was selected so call the sliding routine
// using whatever value you used to identify your first sliding menu
}
else
{
// nothing was selected or an invalid selection was specified
// show the menu items in their DEFAULT state
}
}
End Sub
I'm not completely sure how to call/execute the function as its all in Javascript
Well I can only apologise for my weak Java skills coming from a VB background,
but i hope you got the gist of my meaning and that it helps you address your issue.