How to detect the page is not just being refreshed ?

I have a table of links that is being used for a menu. The menu expands if you click on a menuitem (link) that has subitems and collapses if you click on it again. Pretty standard menu action but here is the problem. The menuitem selected is passed in the URL and if you hit refresh then it appears as if you  have clicked on the menu item. Thus it will toggle between expand/collapse.

What would be the best way to detect that someone has really clicked on the menu item link and not just hit refresh ?

If I pass something in the URL - it will be there as well on a refresh

If I use a form then the user gets the annoying "DO YOU WANT TO REPOST" alerts.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Use javascript to do the expand/collapse action for the menu.  I use the following code all the time for my menu's:

function ToggleView(item) {
      var myItem = document.getElementById(item);
      if( == "none") {
   = "block";
      } else {
   = "none"

That way you can have a link that when they click it, it opens/closes the menu.

<a onclick="ToggleView('menuID');">Menu Item</a>

<div id="menuID" style="display:none;">Menu stuff here</a>

When you click on 'Menu Item', it will display open/close the div that has 'Menu stuff here'.  You can also do this with tables/spans/etc.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Also, this does not refresh the page, it merely modifies the items currently on it.  If they refresh the page, it will reset all the menu's to their default view (in my example this would be the hidden state).
Bl248Author Commented:
Thanks - this looks interesting and I just remembered a client reqirement for this component and why I went down this road. The client wanted a Menu that would work without JS and was server based. I've been chasing a logic error for a day and completely forgot to mention this.

This is why I ended up passing the menuitem details in the URL.

Hum ... so if the current selected item = clicked item then collapse but not if this is a refresh.
But without JS - not sure if this is doable.

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.


"This uses just CSS 2 to turn nested lists into a working menu and does NOT use any JavaScript."
This one is basically the same, but seems a bit more elegant.
Be wary though, the above methods are extremely buggy in Internet Explorer.
Michel PlungjanIT ExpertCommented:
1. use a cookie to keep state of the click
2. if cookies are turn off, let the user LIVE with the toggle
3. use GET in the form to stop the "repost form"question
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.