jQuery accordion control over empty sections

Question

Hello,

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/"&gt;PHP&lt;/a&gt;&lt;/li&gt; 
      <li><a href="http://www.ruby-lang.org/en/"&gt;Ruby&lt;/a&gt;&lt;/li&gt; 
      <li><a href="http://www.python.org/"&gt;Python&lt;/a&gt;&lt;/li&gt; 
      <li><a href="http://www.perl.org/"&gt;PERL&lt;/a&gt;&lt;/li&gt; 
      <li><a href="http://java.sun.com/"&gt;Java&lt;/a&gt;&lt;/li&gt; 
      <li><a href="http://en.wikipedia.org/wiki/C_Sharp"&gt;C#&lt;/a&gt;&lt;/li&gt; 
   </div> 
</div> 

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

Thank you in advance.

Rick

Answer 1

You could bind an event handler to the change event of the accordion: http://jqueryui.com/demos/accordion/#event-change. When it fires, check for the Home header and if it was the header that was selected, close it using the activate method: http://jqueryui.com/demos/accordion/#method-activate

Answer 2

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/