[jquery-ui] nested accordion collapses when i select child item

[seezee]

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 &amp; 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 &amp; 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 &amp; 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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to 
jquery-ui+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---