Please post to the jQuery UI mailing list: http://groups.google.com/group/jquery-ui
Thanks. - Richard On Sat, Jan 3, 2009 at 3:49 PM, Nestor Urquiza <nestor.urqu...@gmail.com>wrote: > Hi, > > Does anybody knows how to get a collapsed accordion when it is first shown? > > > From http://ui.jquery.com/demos/accordion#collapsible one would assume > "alwaysOpen: false" however that is not enough when there are nested > accordions. See the example below (borrowed from a previous post in this > forum with a little change). I would like to have *all* items collapsed when > the page is loaded but the first outer element gets expanded as soon as the > page gets loaded. > > An extra thing to note is that if you click one of the children of the > outer expanded by default element it wont show up its content. You need to > click a second time for it to expand. > > Many thanks! > -Nestor > > <code> > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd";> > > <html lang="en"> > <head> > <script src="jquery-1.2.6.js" type="text/javascript" > charset="utf-8"></script> > <script type="text/javascript" src="ui.core.js"></script> > <script type="text/javascript" src="ui.accordion.js"></script> > <script type="text/javascript" charset="utf-8"> > $(document).ready(function(){ > $('.accordion').accordion({ > autoHeight: false, > alwaysOpen: false > }); > }); > </script> > </head> > <body> > <ul class="accordion"> > <li class=""><a href="#">2007</a> > <ul class="accordion"> > <li><a href="#">December</a><div>hi</div></li> > <li><a href="#">October</a><div>hi</div></li> > <li><a href="#">June</a><div>hi</div></li> > <li><a href="#">April</a><div>hi</div></li> > <li><a href="#">February</a><div>hi</div></li> > <li><a href="#">January</a><div>hi</div></li> > </ul> > </li> > <li class=""><a href="#">2008</a> > <ul class="accordion"> > <li><a href="#">August</a><div>hi</div></li> > <li><a href="#">July</a><div>hi</div></li> > <li><a href="#">June</a><div>hi</div></li> > <li><a href="#">May</a><div>hi</div></li> > </ul> > </li> > </ul> > </body> > </html> > </code> >
