Opened 11 years ago

Closed 9 years ago

#4468 closed bug (fixed)

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.

Change History (5)

comment:1 Changed 11 years ago by mikecapp

Raised newContent/oldContent bug as #4469

comment:2 Changed 11 years ago by Scott González

Milestone: TBD1.8

comment:3 Changed 11 years ago by Panman01

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?

comment:4 Changed 11 years ago by Panman01

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

comment:5 Changed 9 years ago by Scott González

Milestone: 1.91.8.2
Resolution: fixed
Status: newclosed

This was fixed a while ago.

Note: See TracTickets for help on using tickets.