i've solved the problem. thanks anyway. --cz
On May 4, 1:47 pm, seezee <[email protected]> wrote: > 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 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
