title: Functions takes 2 clicks to show hidden div
body: <p>I have a small bit of javascript for showing and hiding a div.</p>
  
  <pre><code>function hidefooter(){
  var button = document.getElementById('footerbutton');
  
  button.onclick = function() {
      var div = document.getElementById('footerbox');
      if (div.style.display !== 'block') {
          div.style.display = 'block';
      }
      else {
          div.style.display = 'none';
      }
  };
  }
  </code></pre>
  
  <p>The div starts {display:none;}. I looked around online and could only find people saying it was an html thing. My problem with that was that when i first wrote it the "block" and "none" values were switched and it took 3 clicks to work. Any help would be great.</p>
  
  <p>update: A better explanation. This code does exactly what i want but you have to click twice to get the effect to work. At first i had the "block" and "none" properties switched and it took 3 clicks to get it to work. The footer starts out {display:none;}.  I put it up online so a friend could take a look at it. the url is <a href="http://www.miettegoesplaces.com" rel="nofollow">http://www.miettegoesplaces.com</a>. click on the purple foot button on the right.</p>
  
  <p>update 2: sorted the problem was i was calling the onClick twice. this is the simplified working version.</p>
  
  <pre><code>function hideFooter(){
  
  var div = document.getElementById('footerbox');
  if (div.style.display !== 'block') {
      div.style.display = 'block';
  }
  else {
      div.style.display = 'none';
  }
  };
  </code></pre>
  
  <p>thanks for everyones comments and advice.</p>