#4468 closed bug (fixed)

Opened April 14, 2009 12:48PM UTC

Closed July 12, 2010 01:20PM UTC

Accordion: example markup doesn't work

Reported by: mikecapp Owned by:
Priority: minor Milestone: 1.8.2
Component: ui.accordion Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

http://jqueryui.com/demos/accordion/ Overview tab.

"By default, the header elements are anchors, assuming the following structure" - no, they aren't, and the markup given won't work without a {header:"a"} option.

Using simple divs for content as this does will appear to work, but breaks ui.{old|new}Content in an accordionchange event handler. Will raise separate bug for this.

Attachments (0)
Change History (5)

Changed April 14, 2009 01:21PM UTC by mikecapp comment:1

Raised newContent/oldContent bug as #4469

Changed April 17, 2009 02:59AM UTC by scottgonzalez comment:2

milestone: TBD → 1.8

Changed April 21, 2009 07:32PM UTC by Panman01 comment:3

This problem relates to the CSS theme framework. The padding applied to make header text position properly for the icon is applied to anchors only. Moving the padding option to .ui-accordion-header solves this problem. However it creates another if the structure is as such in the example, where anchors are embedded in the header tag. The anchor size/area is smaller than what it should be because padding is then applied to the header tag.

I'm not sure what the best solution is here. Just move the padding to .ui-accordion-header and train users to not put anchors inside? Or with jQuery detect if a anchor is embedded and move the padding settings to the anchor instead?

Changed May 26, 2009 07:24PM UTC by Panman01 comment:4

What about on _init wrapping the headers contents in a <span class="ui-accordion-header-inner"> and apply the css styling to that classname instead of <a>?

Changed July 12, 2010 01:20PM UTC by scottgonzalez comment:5

milestone: 1.9 → 1.8.2
resolution: → fixed
status: new → closed

This was fixed a while ago.