jQuery UI Accordion jump bug
10 AugIf you ever used jQuery UI Accordion before, you probably notice that sometimes you have an annoyng bug when you change between accordion items: the bottom of the accordion jumps few pixels. Why is that? That’s why because Dimension plugins (which is included on last version of jquery, by the way) doesn’t know to compute very well the dimensions if you have padding/border attributes.
So, what can I do, perhaps you ask yourself?
- Don’t use padding and borders anymore. Uh… Not too reliable, isn’t?
- Use extra markup. Well… Is not too elegant, but is the best (and also the simplest) way to get rid of headaches! So the only thing you must do is to wrap all accordion item content into a div :
1 2 | <dt>Accordion title</dt> <dd>Accordion content</dd> |
Becomes
1 2 | <dt>Accordion title</dt> <dd><div class="innerAccordion">Accordion content</div></dd> |
All you have to do is to move all DD styles to .innerAccordion and your nightmares is GONE
By the way, in next few days (max a week) i will post the part II of the slider/carousel tutorial. All i have to do is to finish my curent projects (yeah, i have two
). Anyway, stay close!


Hi, I’m encountering this same issue but my markup is different than yours. Do you have any suggestions?
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
Hi,
I’ve tried doing this but the jQuery plugin must be getting confused by the additional markup because it breaks.
I use H3’s as my headers and DIV’s for the content. I placed a SPAN within each DIV to aply the paddings etc.
The result is that the first item opens but then it just does nothing after that.
What could be the cause?
Here’s my markup:
1some text
some text
2some text
some text
3some text
some text
Removing the spans makes the accordion work again…but I have no idea why they’d be messing it up.
Thanks,
Michael.