Using jQuery's slideDown with display: inline-block

Question

How can I use jQuery's slideDown with display: inline-block, as opposed to the default display: block;

Some of the content inside the div I'm using requires it to be so, and the design partly breaks unless I fix it. However, fixing it after the sliding down has finished will be glitchy.

Any ideas?

Similar to http://stackoverflow.com/questions/8144944/change-slidetoggle-behaviour-to-displayinline-block-instead-of-displayblock — Pranav 웃, Feb 26 '12 at 18:14

score 26 · Accepted Answer · answered Feb 26 '12 at 18:24

26

You should probably wrap the div with display: inline-block, into another div, with simple display: none, that will be the target of your slideDown function. I made up a demo for you here http://jsfiddle.net/d3BHL/2/
Let me know if it helps

answered Feb 26 '12 at 18:24

themarcuz

2,573
6
36
53

Thanks, that's what I ended up doing (only, with CSS3) – Feb 29 '12 at 11:44
3

This fiddle is broken. The display styles should be the other way around: container should be inline, and the inside div should be display none. – smilebomb Aug 15 '16 at 14:43

Using jQuery's slideDown with display: inline-block

1 Answers1