Opened 14 years ago

Closed 14 years ago

#3759 closed bug (worksforme)

[jquery-ui] [ui accordion] alwaysOpen option for nested lists

Reported by: nestor.urquiza Owned by:
Priority: minor Milestone: 1.7
Component: ui.accordion Version: 1.6rc4
Keywords: Cc:
Blocked by: Blocking:


Hi guys,

I believe there is a bug and I am providing a solution to correct it.


On Sun, Jan 4, 2009 at 3:47 AM, Nestor Urquiza <[email protected]…> wrote:

Just changing the subject in case my post got ignored by some filters. Anyone out there with experience in nesting accordions?

---------- Forwarded message ---------- From: nestor.urquiza <[email protected]…> Date: Sat, Jan 3, 2009 at 4:47 PM Subject: [ui accordion] alwaysOpen option for nested lists To: jQuery UI <[email protected]…>


Does anybody know how to get a collapsed nested accordion when it is first shown?

From 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 "-W3CDTD HTML 4.01 TransitionalEN"


<html lang="en"> <head>

<script src="jquery-1.2.6.js" type="text/javascript"


<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>


<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>


I have patched ui.accordion.js to allow nested accordions to work correctly when alwaysOpen option is set to false. Below are the changes: diff ui.accordion.js.original ui.accordion.js 32,33c32,34 < options.headers = this.element.find(options.header); < = findActive(options.headers,; ---

options.headers = this.element.find(options.header); var defaultActive = options.alwaysOpen == true ? : "{}"; = findActive(options.headers, defaultActive);

63d63 < 67,68c67,70 < .hide(); <; ---


if (options.alwaysOpen == true) {;

  • Hide quoted text -


Change History (1)

comment:1 Changed 14 years ago by Scott González

Milestone: TBD1.6
Resolution: worksforme
Status: newclosed

The alwaysOpen option does not affect the initial status of the accordion. If you want an accordion to start with no open panels, use active: false.

    alwaysOpen: false,
    active: false
Note: See TracTickets for help on using tickets.