CODEWITHSUNDEEP
jqueryjquery-ui
rboarman
rboarman

Reputation: 8214

jQuery accordion control over empty sections

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:

alt text

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

Upvotes: 4

Views: 1951

Answers (2)

Ryley
Ryley

Reputation: 21226

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/

Upvotes: 1

Chris Laplante
Chris Laplante

Reputation: 29658

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

Upvotes: 0

Related Questions