Opened 13 years ago

Closed 13 years ago

#4902 closed bug (duplicate)

Accordion height problems with display:none

Reported by: nickknw Owned by:
Priority: minor Milestone: 1.8
Component: ui.accordion Version: 1.7.2
Keywords: accordion height display none Cc:
Blocked by: Blocking:



The first accordion section to be 'opened' does not adjust its height to match its contents, resulting in the contents being obscured or invisible.

This is exacerbated when only one group is visible, as there is nothing the user can do to expand it. When there is more than one group visible, opening another group then opening the first group again will serve as a workaround.


  • autoHeight: false is set
  • The first Group has a style of display:none
  • At least one group in the accordion does NOT have a style of display:none

When this might be a problem:

When a developer would like to dynamically show or hide sections of an accordion based on some other user input (e.g. a select box or something). Also, it looks like this bug is probably related and/or stems from a similar issue:

I have attached a premade example that reproduces this bug, for anyone that wants to see it for themselves.

Attachments (1)

accordionbug.rar (86.8 KB) - added by nickknw 13 years ago.
Example of the bug

Download all attachments as: .zip

Change History (5)

Changed 13 years ago by nickknw

Attachment: accordionbug.rar added

Example of the bug

comment:1 Changed 13 years ago by nickknw

When using IE8 (maybe IE7 or 6 - not tested) the bug is somewhat more severe. The first accordion section opened remains open when the user clicks on another section. The accordion control is left with two opened sections and then does not respond to any further actions by the user.

comment:2 Changed 13 years ago by nickknw

I have had some success using the following code as a workaround, although I grant it is by no means ideal.

		accordions.each(function() {
		    index = 0;
		    var first_visible_section_activated = false;
		    $(this).children("h3").each(function(index) {
			if (($(this).css("display") != "none") && first_visible_section_activated == false) {
			    var accordion = $(this).parent();
			    accordion.accordion('option', 'collapsible', true);
			    accordion.accordion('option', 'animated', false);

			    accordion.accordion('activate', false);
			    accordion.accordion('activate', index);

			    accordion.accordion('option', 'animated', 'slide');
			    accordion.accordion('option', 'collapsible', false);
			    first_visible_section_activated = true;

comment:3 Changed 13 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:4 Changed 13 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #3905.

Note: See TracTickets for help on using tickets.