html - jqueryアコーディオンの2つのアイテムの間に仕切りを追加するとすぐに、それは混乱します

Question

jquery UI アコーディオンをスキンしました。すべて正常に動作します。しかし、2つのアイテムの間にdivまたはhrを追加するとすぐに、すべてが奇妙になります

http://jsfiddle.net/cancerian73/bgkCg/1/

.divider{width:100%; height:15px; background-color:#F00;}

Answer 1

As described in the jquery-ui accordion documentation, you must have pair of header/content in your markup :

The markup of your accordion container needs pairs of headers and content panels

[...]

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

Because you are adding elements between header/content pair :

<div class="divider"></div>

you must use the header option. All you need is to specify which elements are headers in your markup and add your content as siblings of those elements.

Have a look in this jsFiddle and tell me if it feet your needs.