title: keep hidden div id on browser refresh
body: <p>I have divs set to 100% height and have them showing and hiding with a combination of css and jquery.</p>
  
  <p>All works perfectly until I am on index.html#panel(x) and refresh my browser. Then it converts back to a messy scroll function.</p>
  
  <p>Here's the crux: Is there a better way to set this up? It seems like all I'm trying to do is show and hide divs, but I need to be able to refresh the index.html#panel(x) and have it all work seamlessly. </p>
  
  <p>Please let it be known that I am not a jquery or javascript savant, so please be kind when you chastise how dumb I am.</p>
  
  <p>I've spent too many sleepless night trying to get this functionality right and need some help. Here is the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  html, body {
  height:100%;
  margin:0;
  padding:0;
  
  }
  
  .nav {
  position: fixed;
  top: 0;
  left:0;
  z-index:100;
  
  }
  
  .container_main {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  }
  
  #panel1, #panel2, #panel3, #panel4, #home  {
  max-width: 680px;
  height: 100%;
  margin:auto;
  }
  
  #panel1, #panel2, #panel3, #panel4  {
  display:none;
  }
  
  #panel1:target{
  display:block;
  }
  
  #panel2:target{
  display:block;
  }
  
  #panel3:target{
  display:block;
  }
  
  #panel4:target{
  display:block;
  }
  
  
  &lt;/style&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $(".toggle").click(function(){
      $("#home").hide();
  });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="nav"&gt;
  &lt;a class="toggle" href="#panel1"&gt;Panel1&lt;/a&gt;&lt;br&gt;
  &lt;a class="toggle" href="#panel2"&gt;Panel2&lt;/a&gt;&lt;br&gt;
  &lt;a class="toggle" href="#panel3"&gt;Panel3&lt;/a&gt;&lt;br&gt;
  &lt;a class="toggle" href="#panel4"&gt;Panel4&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="container_main"&gt;
  &lt;div id="home" style="background-color:#678993;"&gt;Minneapolis&lt;/div&gt;
  &lt;div id="panel1" style="background-color:#678993;"&gt;Minneapolis&lt;/div&gt;
  &lt;div id="panel2" style="background-color:#cccccc;"&gt;LALA&lt;/div&gt;
  &lt;div id="panel3" style="background-color:#aaaaaa;"&gt;St Paul&lt;/div&gt;
  &lt;div id="panel4" style="background-color:#DB62A1;"&gt;SF&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The simpler, most cross-browser solution the better, Thanks in advance!</p>