#3759 closed bug (worksforme)

Opened January 04, 2009 04:10PM UTC

Closed January 04, 2009 04:18PM UTC

[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@gmail.com> 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@gmail.com>

Date: Sat, Jan 3, 2009 at 4:47 PM

Subject: [ui accordion] alwaysOpen option for nested lists

To: jQuery UI <jquery-ui@googlegroups.com>

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 -
}
Attachments (0)
Change History (1)

Changed January 04, 2009 04:18PM UTC by scottgonzalez comment:1

milestone: TBD → 1.6
resolution: → worksforme
status: new → closed

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
});