Question

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.

Answer 1

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(); 
    }