JQuery accordion control over empty sections

Question

I have a jQuery accordion that I use in ui style. My question is: how can I have a section that does not have subsections and does not expand on hover? I use mouseover as my trigger.

For instance:

In the "Home" section there is nothing below it. I would like it to remain collapsed when it hovered over it. When you click, it should go to the href target (what it does).

Initialization Code:

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

Markup (short 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> 

Style sheet directly from jQuery ui library.

Thanks in advance.

Rick

Answer 1

I made a couple of changes to make this work, mainly adding id to your home title and collapsible: true to the accordion.

Then add them after creating the 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/

Answer 2

You can associate an event handler with the change event of the accordion: http://jqueryui.com/demos/accordion/#event-change . When it starts, check the Home header, and if it has a header, close it using the activate method: http://jqueryui.com/demos/accordion/#method-activate