nested accordion collapses when i select child item
i've built a nested accordion, which functions partially. it uses the
heading-div structure (see code example below). when i select a parent
accordion, it expands fine & shows the collapsed child items below.
but when i select a child item to expand it, the parent closes.
the example is live here:
http://www.messengerwebdesign.com/dishingitup/?page=nutrition
here's the javascript:
<script type="text/javascript">
jQuery().ready(function(){
// customized accordion
jQuery('#nutrition1, #nutrition2, #appetizer, #soup, #bread,
#seafood, #beef, #beans, #dessert, #eggs, #pasta, #casserole,
#poultry, #pork, #vegetables').accordion({
active: '.selected',
selectedClass: 'active',
animated: "bounceslide",
header: "h3, h4",
alwaysOpen: false,
autoheight: false
});
// bind to change event of select to control first and seconds
accordion
// similar to tab's plugin triggerTab(), without an extra method
var accordions = jQuery('#nutrition1, #nutrition2, #appetizer,
#soup, #bread, #seafood, #beef, #beans, #dessert, #eggs, #pasta,
#casserole, #poultry, #pork, #vegetables');
jQuery('#switch select').change(function() {
accordions.accordion("activate", this.selectedIndex-1 );
});
jQuery('#close').click(function() {
accordions.accordion("activate", -1);
});
jQuery('#switch2').change(function() {
accordions.accordion("activate", this.value);
});
jQuery('#enable').click(function() {
accordions.accordion("enable");
});
jQuery('#disable').click(function() {
accordions.accordion("disable");
});
jQuery('#remove').click(function() {
accordions.accordion("destroy");
});
});
</script>
and a shortened & simplified version of the html, without stylistic
classes:
<div id="nutrition1">
<h3>Appetizers & Sides</h3>
<div>
<div class="appetizer">
<h4>Item 1a</h4>
<div>Content 1a</div>
</div>
<h4>Item 1b</h4>
<div>Content 1b</div>
<!--end #appetizer-->
</div>
<h3>Soups, Stews & Chowders</h3>
<div>
<div class="soup">
<h4>Item 2a</h4>
<div>Content 2a</div>
</div>
<h4>Item 2b</h4>
<div>Content 2b</div>
</div>
<!--end #soup-->
</div>
<h3>Bread & Pizza</h3>
<div>
<div class="bread">
<h4>Item 3a</h4>
<div>Content 3a</div>
</div>
<h4>Item 3b</h4>
<div>Content 3b</div>
</div>
<!--end #bread-->
</div>
</div>
i've variously tried changing the autoheight, alwaysOpen, adding a
line for clearStyle, commenting out the various select functions,
changing the active parameter, all with no luck.
thanks in advance for your suggestions,
--cz