title: Javascript hide/show layers
body: <p>I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.</p>
  
  <pre><code>  &lt;script language=javascript type='text/javascript'&gt; 
      function hidediv() { 
      if (document.getElementById) { // DOM3 = IE5, NS6 
      document.getElementById('layer').style.visibility = 'hidden'; 
      document.getElementById('topbar').style.visibility = 'visisble';
      } 
      else { 
      if (document.layers) { // Netscape 4 
      document.layer.visibility = 'hidden'; 
      document.topbar.visibility = 'visible'; 
  
      } 
      else { // IE 4 
      document.all.layer.style.visibility = 'hidden'; 
      document.all.topbar.style.visibility = 'visible'; 
      } 
      } 
      }
  
      function showdiv() { 
      if (document.getElementById) { // DOM3 = IE5, NS6 
      document.getElementById('layer').style.visibility = 'visible'; 
   document.getElementById('topbar').style.visibility = 'hidden';
      } 
      else { 
      if (document.layers) { // Netscape 4 
      document.layer.visibility = 'visible'; 
  document.topbar.visibility = 'hidden'; 
      } 
      else { // IE 4 
      document.all.layer.style.visibility = 'visible'; 
  document.all.topbar.style.visibility = 'hidden';
      } 
      } 
      } 
      &lt;/script&gt;
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code> #topbar {
      background-image: url(images/back.png);
  background-repeat: repeat;
  height: 30px;
  margin-top: 20px;
  visibility: hidden;
  }
  
  #show {
      float: right;
      padding-right: 40px;
      padding-top: 10px;
  }
  
  #hide {
      float: right;
      padding-right: 40px;
  }
  
  #layer {
  background-image: url(images/back.png);
  background-repeat: repeat;
  padding-left: 20px;
  padding-bottom:20px;
  overflow: auto;
  }
  </code></pre>
  
  <p>using standard html links like:</p>
  
  <pre><code>&lt;a href="javascript:hidediv()"&gt;Hide&lt;/a&gt;
  </code></pre>
  
  <p>Any help would be appreciated, cheers!</p>
  
  <p>EDIT</p>
  
  <p>okay switched to something completely new but it seems to not show after hiding</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  </code></pre>
  
  <p>$(function(){
    $('#showhide').click(function(){
       $('#layer').toggle();
       $('#topbar').toggle(); 
    });
  });
  </p>
  
  <p>and</p>
  
  <pre><code>&lt;a href="javascript:void(0);" id="showhide"&gt;Show/Hide&lt;/a&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div id="layer"&gt;&lt;/div&gt;
  </code></pre>