Alternative to jQuery's slideDown() and slideUp() not affecting the display property.

Question

Hello,

I've been trying to use the slideDown() effect for a website I'm working on, but I'm having difficulty getting the effect I want. Here's a sample showing what I want to accomplish.

<div>
    blahblahblahblah

    <span id="span_more" style="display:none">
        blahblahblah
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div>
</div>

Basically, when "More..." is clicked, I want the text that's currently hidden to appear using a sliding effect while staying inline with the end of the visible text. This doesn't seem possible with slideDown() because it is changing display to block.

Thank you very much.

Answer 1

Unfortunately, this is essentially impossible. jQuery's animation relies upon the element having height and width. Inline elements do not have these dimensions set or settable, so animations (whether using animate or slideUp) must make them block-level elements.

fadeIn does work, and may be a useful alternative.

Answer 2

I've had that problem before. At that time it seemed not possible to change the jQuery behaviour, and I ran into problems while writing a routine that would do the same with inline blocks. So, I switched to just using display: block elements with float: left to keep them in one line.

<div>
    <div style="display: block; float: left;">blahblahblahblah</div>

    <div id="span_more" style="display: none; float: left;">
        blahblahblah
    </div> 

    <a style="display: block; float: left;" class="link_more" id="more">More&hellip;</a></div>
</div>

Answer 3

You'll need to wrap your text that always shows in a span or div that floats left, have the "additional" text float left as well, and have your link clear: both;, but this structure will make a simple .slideDown() work:

<div>
    <span style="float: left;">blahblahblahblah</span>

    <span id="span_more" style="display: none; float: left;">
        blahblahblah
    </span>

<div style="clear: both;"><a class="link_more" id="more">More&hellip;</a></div>
</div>

Here's a demo showing this in action: http://jsfiddle.net/7yqMr/