How to make toggle hidden by default
<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>
