Question

I have a jQuery accordion that I am styling using the ui themes. My question is, how can I have a section that has no sub-sections and does not expand when mouse-overed? I am using mouseover as my trigger.

For example:

The Home section has nothing underneath it. I would like it to stay collapsed when hovered over. When clicked it should navigate to the href target (which it does).

Init code:

<script type="text/javascript"> 
    $(function () { 
        $("#accordion").accordion({ 
            event: "mouseover", 
            alwaysOpen: false,  
            autoHeight: false, 
            navigation: true, 
        }); 
    }); 
</script> 

Markup (shortened for brevity):

<div id="accordion"> 
   <h3><a class="heading" href="~/Home">Home</a></h3> 
   <div> 
   </div> 
   <h3><a href="#">Browse</a></h3> 
   <div> 
      <li><a href="http://www.php.net/">PHP</a></li> 
      <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li> 
      <li><a href="http://www.python.org/">Python</a></li> 
      <li><a href="http://www.perl.org/">PERL</a></li> 
      <li><a href="http://java.sun.com/">Java</a></li> 
      <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li> 
   </div> 
</div> 

The style sheet is straight from the jQuery ui theme library.

Thank you in advance.

Rick

Answer 1

I made a couple changes to get this working, mainly adding an id to your home header and collapsible: true to the accordion.

Then, add these after you create your accordion:

$('#home').unbind('mouseover');//don't accordion on mouse over
$('#accordion').accordion('activate', 0);//close the home accordion

For a working example, see here: http://jsfiddle.net/ryleyb/mywfV/