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!