search

kswedberg / jquery-expander

Expand and Collapse HTML content
https://kswedberg.github.io/jquery-expander/
Other
459 stars 167 forks source link

Expanded text appears on a new line #46

Closed jmoscrip closed 11 years ago

jmoscrip commented 12 years ago

Because the plugin uses display:inline-block it puts the expanded text on a new line. E.g. http://jsfiddle.net/hKDD8/. Is there a fix for this?

kswedberg commented 12 years ago

That looks ugly. It's not the plugin that uses display: inline-block, however; it's jQuery. And I'm not sure why. I can investigate a bit more, but in the meantime, you can work around this by setting the expandSpeed option to 0 and adding an afterExpand callback function that changes the display property to inline. One obvious drawback of this, of course, is that you won't get a nice effect (sliding or fading) when it expands. I posted an update at http://jsfiddle.net/kswedberg/qTSbg/ for you.

kswedberg commented 12 years ago

I take back what I implied about it being jQuery's fault. It's only partially jQuery's fault. The problem has to do with this line: https://github.com/kswedberg/jquery-expander/blob/master/jquery.expander.js#L250

The plugin re-creates the element you called .expander() on, with additional elements inside it. One of those elements, a "details" span, gets hidden right away, but the plugin doesn't just use .hide(). It uses the collapseEffect with a speed of 0. If it used .hide() instead or if the collapseEffect were "fadeOut," the detail element would, in fact, get display: inline.

So, why not just use .hide() or change the collapseEffect? Well, jQuery needs the element to be something other than display:inline if it's going to animate its height property (which is what slideUp and slideDown do). If the element is display:inline and the expandEffect is still "slideDown," then it won't animate its height but instead "snap" to its full height immediately.

A workaround, if you really want the animated expand/collapse effects, is to change expandEffect to fadeIn and collapseEffect to fadeOut: http://jsfiddle.net/kswedberg/qTSbg/3/ . Beware, though, that at least one person ran into a crashing bug with this in IE9 (which is why I changed the defaults to slideDown/slideUp in the first place): https://github.com/kswedberg/jquery-expander/issues/24.

Please let me know if you have any other thoughts on this.

jmoscrip commented 12 years ago

Hi Karl

Thanks for the quick replies on this! Your first workaround is fine for my current requirements.

Thanks again

John

ZaneCEO commented 9 years ago

Found this googling for the issue :+1: the fadeIn/Out workaround works extra-well for me, thanks!