CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Xavio
Xavio

Reputation: 437

Jquery slideToggle, still no easy non-jumpy solution?

I'm still to this day surprised when I run into the slideDown jumpy bug in jQuery. Been reading so much about it, articles on jQuery for designers and so on. Still can't wrap my head around it.

Is there still no easy way to solve this without storing heights and so on? Any other take to get to the same result?

Made a basic example of my code in question, but I guess it's the same as in any other buggy case.

http://jsbin.com/oyokoc/20/edit

Upvotes: 3

Views: 1912

Answers (1)

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

There is no bug as such you are saying in slidetoggle actually,

The problem is with how the browser behave to the default padding and margin for the tags like p, if they are not visible the default padding and margin are not added,

but as soon they become visible they are added in the layout and i.e. the reason of this jumping you are mentioning.

Here is something I did for ignoring these implementation error: 

.more{
 display: none;
 background: #eee;
 /* added to make the margin and padding instead of p */
 padding: 5px;
 margin-top: 5px;
}

/* removing the default margin and padding of p */
p{
 margin: 0px;
 padding :0px;
}

Here is the demo http://jsbin.com/udexix/1/

UPDATE

If you want to use multiple p and dont want to change the default padding and margins, what you can do is you can change the display style for all the p to inline-block

Here is the code for that as well:

.more{
 display: none;
 background: #eee;
 /* no changes here */
}

/* changing the display property of p */
p{
 display: inline-block;
}

Here is the demo 2 http://jsbin.com/udexix/8/

Upvotes: 6

Related Questions