Basic jQuery slideUp and slideDown driving me mad!

Question

my jQuery skills are pretty good normally but this is driving me mad!

It\'s a fairly simple accordian I\'ve coded up from scratch. Using jQuery 1.3.2 so there should

Answer 1

Replacing margin-top and margin-bottom values with padding-top and padding-bottom values did the trick for me. Don't forget to set the margin value to 0 after this.

Answer 2

For me, the problem was the margin (or padding) on the div to show/hide with slide, but I needed to give margin (or padding) to that div. I solved with this trick:

  .slide-div:before{
    content: " ";
    display: block;
    margin-top: 15px;
  }

Answer 3

I also had an annoying slideUp() jump issue that occurred on Safari, but not chrome or IE. It turned out that the div tag I was hiding/showing was right below another div tag that contained float:left divs. During sliding up, the floating divs would be momentarily re-rendered causing the jump.

The fix was simply adding clear:both to the style of the hiding/showing div.

Answer 4

This worked for me:

$(this).pathtoslidingelementhere.width($(this).parent().width());