How to make toggle hidden by default

jquery

Solution

I guess, you want something like this,

Demo ( I used `onclick` in demo because jsfiddle doesnt like javascript on `href`)

CSS:

.hidden{
       display:none;
    }

Markup:

<a href="javascript:toggleDiv('myContent');">this is a test</a>
<div id="myContent" class='hidden'>
  <div>this is a test #1 </div>
</div> 
<br />
<a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a>
<div id="myContentt" class='hidden'>
 this is a test #2
</div>

Javascript:

function toggleDiv(divId) {
        $("#"+divId).toggle(); 
    }

Problem

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. I have to tried to use CSS something like ``` .hidden { display:none; } ``` when I use this code, the element doesn't show at all. this is my code EDITED ``` <script type="text/javascript"> function toggleDiv(divId) { $("#"+divId).toggle(); } </script> ``` ``` <a href="javascript:toggleDiv('myContent');">this is a test</a> <div id="myContent"> <a href="javascript:toggleDiv('myContentt');"><span>this is a text</span></a> <div>this is a test #2 </div> </div> <div id="myContentt"> test </div> ``` please help.

Original source