title: Toggling between two buttons using jQuery
body: <p>I've seen a few articles about this dotted around but I cant seem to get their solutions to work for me.</p>
  
  <p>What I have are two buttons which control the show() and hide() states of different div's. On page load both of the div's are set to .hide() as the user doesn't need to see them until clicked.</p>
  
  <p>So, I have two buttons a and b which currently work perfectly however you can show() both div's at the same time which I don't want to happen. The current code resembles </p>
  
  <pre><code>$('#a-div).hide();
  $('#b-div).hide();
  $('#a').click(function(){
      $('#a-div).toggle(500);
  });
  $('#b').click(function(){
      $('#b-div).toggle(500);
  });
  </code></pre>
  
  <p>So how can I re-write this so that if #a-div is visible (already tried the .is(':visible') method) and #b is clicked nothing happens until #a-div is hidden again and vis versa? </p>