Opened 10 years ago

Closed 10 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:

Description

Hi guys,

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

PROBLEM:


On Sun, Jan 4, 2009 at 3:47 AM, Nestor Urquiza <nestor.urquiza@…> 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 <nestor.urquiza@…> Date: Sat, Jan 3, 2009 at 4:47 PM Subject: [ui accordion] alwaysOpen option for nested lists To: jQuery UI <jquery-ui@…>

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

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

SOLUTION:


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); < options.active = findActive(options.headers, options.active); ---

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

63d63 < 67,68c67,70 < .hide(); < options.active.parent().andSelf().addClass(options.selectedClass); ---

.hide();

if (options.alwaysOpen == true) {

options.active.parent().andSelf().addClass(options.selectedClass);

  • Hide quoted text -

}

Change History (1)

comment:1 Changed 10 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.

$(el).accordion({
    alwaysOpen: false,
    active: false
});
Note: See TracTickets for help on using tickets.