jQuery UI Accordion jump bug into jquery at Ionut Staicu

jQuery UI Accordion jump bug

10 Aug

If 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!

Tags: jquery, Jquery UI Comments (2)

Bookmark this article!

Did you like this article?

Don't hesitate to subscribe to my RSS feed!

Also, don't forget, you can also read me on twitter!

2 Comments »

October 6, 2009 greenerist said:

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.
January 20, 2010 Unibands said:

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.