title: Toggle slideDown/slideUp multiple states on page load
body: <p>When the page loads, there are elements that I want showing the content and others hiding the content. When the user clicks the header, the element will toggle between hiding and showing depending on what their current state is. The script that I have written works, but it has a quark and I feel it needs to have an if/else to determine the state of the .content to determine the click. Currently it requires the user to click twice on the hidden element to display .content.</p>
  
  <pre><code> $('#services .content').hide();
   $('.header').toggle(function() {
      $(this)
         .addClass('active')
         .next('.content').slideUp();
      }, function() {
         $(this)
         .removeClass('active')
         .next('.content').slideDown();
   });
  </code></pre>
  
  <p>Here is a link to the <a href="http://jsfiddle.net/benblustey/JeabZ/" rel="nofollow">jsfiddle</a></p>
  
  <p>Any Help is much appreciated. Thank you.</p>