How do I set the initial state of a jquery hoverIntent

Question

The code below works fine, in expanding and compressing the "accordian". I'm having trouble with setting the initial state, and starting off with the accordian compressed.

I tried CSS of display:none on the embedded li's, but then it doesn't expand.

$(document).ready(function(){

    var hi_config = {
    sensitivity: 3,
    interval: 300,
    over: hi_mouseover,
    timeout: 300,
    out: hi_mouseout
  };


  $("#accordion > li").hoverIntent( hi_config );

});

function hi_mouseover( ) {
  var $this = $(this);
  $('ul', this).stop(true, true).slideDown('medium');
}

function hi_mouseout( ) {
  var $this = $(this);
  $('ul', this).stop(true, true).slideUp('medium');
}
                       

<ul id="accordion">
   <li><a href="...">Branch 1</a>
    <ul>
            <li><a href="...">leaf 1</a></li>
            <li><a href="...">leaf 2</a></li>
         </ul>
    </li>
   <li><a href="...">Branch 2</a>
    <ul>
            <li><a href="...">leaf 3</a></li>
            <li><a href="...">leaf 4</a></li>
         </ul>
    </li>
</ul>

Answer 1

EDIT Oops, what I said below was assuming you were using JQueryUI's accordion widget. I must have misread your question. For what you're doing, I would suggest using the JQueryUI accordion. But if you want to continue your way, I would suggest adding

$("#accordian > li").each().slideUp('medium');

to your $(document).ready function.

Old Answer

set

collapsible:true,

and call:

$('#accordion').accordion( "activate" , false )

Answer 2

Josiah is right, thank you. I had to change the syntax a bit to make it work in my case.

$("#accordion ul").each(function(){ $(this).slideUp('medium'); });