title: How to make toggle hidden by default
body: <p>Hello I would like to know how to make toggle hidden when the page loads, I have made a simple code, but when the page loads it will be shown by default. I want it the way around.</p>
  
  <p>I have to tried to use CSS something like</p>
  
  <pre><code>.hidden {
  display:none;
  }
  </code></pre>
  
  <p>when I use this code, the element doesn't show at all.</p>
  
  <p>this is my code</p>
  
  <p><em>EDITED</em></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   function toggleDiv(divId) {
    $("#"+divId).toggle();
  
    }
   &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;a href="javascript:toggleDiv('myContent');"&gt;this is a test&lt;/a&gt;
     &lt;div id="myContent"&gt;
        &lt;a href="javascript:toggleDiv('myContentt');"&gt;&lt;span&gt;this is a text&lt;/span&gt;&lt;/a&gt;
            &lt;div&gt;this is a test #2 &lt;/div&gt;
     &lt;/div&gt;
  
            &lt;div id="myContentt"&gt;
              test
            &lt;/div&gt;
  </code></pre>
  
  <p>please help.</p>