title: How can I hide an element on load?
body: <p>My code enables accordion with jQuery.<br>
  When I click on <code>accordion dt</code> element, accordion opens, and it closes if I click it again.  </p>
  
  <p>As default, it's opened but it closes after whole page load.<br>
  This looks really strange so that I want to hide it as default.<br>
  Is it possible?</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>jQuery(document).ready( function() {
      $(".accordion dt").click(function(){
          $(this).next("dd").slideToggle();
          $(this).next("dd").siblings("dd").slideUp();
          $(this).toggleClass("open");   
          $(this).siblings("dt").removeClass("open");
      });
  });
  
  window.onload = function(){     
          $(".accordion dd").hide();
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="accordion"&gt;
      &lt;dt&gt;&lt;h3&gt;Menu&lt;/h3&gt;&lt;/dt&gt;
      &lt;dd&gt;
      Menu Contents
      &lt;/dd&gt;
  &lt;/div&gt;
  </code></pre>