How to make toggle hidden by default

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

Just add the

$("your class").hide();

Example

$(document).ready(function(){
    $(".subResult").hide();
});

then you can define your function
 function toggle(){
$(".subResult").slideToggle(2000);
     }

Another Example

$(document).ready(function(){

$("p").hide();

  $("button").click(function(){

    $("p").toggle();

  });

});

///////

$("p").hide(); This line hides your div on ready function.

Use .toggleClass('hidden') to show and hide your elements.