Nested UI Accordions?

Question

I am using Jquery UI Accordion

Here is the html structure

<div class="accordion">
  <div class="accordion-section">
     <div class="accordion-head">
     </div>
     <div class="accordion-body">
     </div>
   </div>
   <div class="accordion-section">
     <div class="accordion-head">
     </div>
     <div class="accordion-body">
     </div>
   </div>
</div>  

And here is the JS call

$(".accordion").accordion({
    header: ".accordion-head",
    collapsible: true,
    active: false,
    heightStyle: "content"
});

Now, this works fine until I nest accordion within accordion. When you click on the nesting accordions, the parent accordion closes...

What am I doing wrong? I can nest Tabs, why can't I nest accordions?

I have put a JS fiddle here: http://jsfiddle.net/mktmapyu/

Answer 1

Try:

$(".accordion").accordion({
    header: ">.accordion-head", //Note the selector change
    collapsible: true,
    active: false,
    heightStyle: "content"
});

instead of

$(".accordion").accordion({
    header: ".accordion-head",
    collapsible: true,
    active: false,
    heightStyle: "content"
});

Demo: http://jsfiddle.net/lotusgodkk/mktmapyu/3/

Explanation: When you pass ".accordion-head" it means that all the elements with class ".accordion-head" will work as header for the accordion. But when you pass ">.accordion-head" then it will set the immediate child with class ".accordion-head" for header and hence the toggling will work only for the corresponding accordions.