Hi, Does anybody know how to get a collapsed nested 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>
