hide div based on anchor value

[fife]

I have a page with 2 divs that can be hidden.  Now when I load the page the URL looks as follows

 

www.example.com/wedding.php#pyromusicals 

 

or it could be

 

www.example.com/wedding.php#just-fireworks

 

now im trying to hide a different div depending on the anchor value and if there is no anchor then hide them both.  Here is my code so far

 

 

   

  $(document).ready(function() {
 
    // Get # parameter
    var param = document.URL.split('#')[1];
 
 
if (param == 'pyromusicals') {
    $(".hidden-div2").hide();
    }
 
    else if (param == 'purely-fireworks') {
    $(".hidden-div1").hide();
    }
 
 
   });

The problem is that on page load neither works but if you manually hit refresh then the jquery starts working. The links on the page are just html links

 

 

      <li><a href="/wedding-fireworks.php#pyromusicals" title="View information about pyromusical displays for weddings">Pyromusicals</a></li>
            <li><a href='/wedding-fireworks.php#purely-fireworks' title="View information about wedding fireworks"><span>Purely Fireworks</span></a></li>

 

Any ideas.  I am completely new to java and jquery so I'd have no idea where to begin trouble shooting this.

 

[fife]

Ok I have solved it.  So when the second anchor is clicked the page does not refresh it just moves.  Too force a refresh ive put another var in the url

 

 

so

 

www.example.com#pyro

 

became

 

www.example.com?string=1#pyro

 

this made the page refresh