slideDown() not working when css is set to display:none

Question

I have taken https://stackoverflow.com/a/11417877/3842368 and I'm now trying to modify it so that the hidden text appears via a slideDown() rather than show().

My fiddle is here: http://jsfiddle.net/LukeMcLachlan/h0gx2fpj/

You see on line 16 of the js that I have set:

$(this).next().slideDown("slow");

What this does is create a line break between the text "id vim mo" and "dus electram". These should instead flow on the same line, i.e. no line break. Using show(), as the original code does, works just fine, but it's ugly. I've been searching on SO for a solution and found one person suggesting that I should change the code to:

$(this).next().slideDown("slow").css("display", "inline"); 

the reason being that slideDown inserts a display:inline-block on the hidden < span >. However, when I change the code to this, slideDown stops working all together.

Can anyone provide me with a solution? I have tried slideToggle and still no luck.

Thanks.

Answer 1

Well the issue is inline does not have a height so it is hard to animate an element that does not have a height. So instead of animating the content that you are showing, animate the parent

var minimized_elements = $('p.minimize');

minimized_elements.each(function () {
    var t = $(this).text();
    if (t.length < 325) return;

    $(this).html(
    t.slice(0, 325) + '<span class="elip">... </span><a href="#" class="more">more</a>' +
        '<span class="overflow" style="display:none;">' + t.slice(325, t.length) + ' <a href="#" class="less">less</a></span>');

});

$('a.more', minimized_elements).click(function (event) {
    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper
    
    para.find(".elip, .more").hide();
    para.find(".less").show();
  
    var currentHeight = para.height();
    para.data("height", currentHeight);
 
  
    para.height(para.height()).css("overflow","hidden");  //set the parent height and set overflow to hidden
    para.find(".overflow").css("display","inline");  //show the hidden text (really should have a class)
    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para[0].scrollHeight
    }, 500, "swing", function() {
        para.height("auto");  //reset height when done
    });
});

$('a.less', minimized_elements).click(function (event) {

    event.preventDefault();
    var anchor = $(this);
    var para = anchor.closest(".minimize");  //the parent wrapper
    
    para.find(".less").hide();

  
  
    para.animate({  //use animate instead of slide down, use the scrollHeight to know where to stop
        height : para.data("height"),
    }, 500, "swing", function() {
        para.find(".overflow").hide();
        para.find(".elip, .more").show();
        para.height("auto");  //reset height when done
    });

    
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="minimize">Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei. Lorem ipsum dolor sit amet, justo laoreet eu qui. Iudicabit torquatos cu sit, at prompta fastidii fabellas mei. Cum laudem meliore reformidans cu, quas verear fabellas sed at. Et wisi invidunt apeirian nec, te tota altera postulant mea, mel ne possim omnesque. Meis molestie patrioque sea in, vero gubergren sed eu, id vim modus electram. Mei aeque omittam instructior ei.</p>

Answer 2

Well, you could change the .next() element to display: inline after the slide is done:

$(this).next().slideDown("slow",function(){ $(this).css("display","inline"); });

But this might be a bit cluncky, as it displays inline-block first then switches to inline suddenly. I really don't see a (simple) way of accomplishing the slide animation without it being block or inline-block to begin with. Maybe try a different animation? Like .fadeIn('slow')?

Explanation:

.slide() (and its variants) work with element height, and height only works on block-type elements. Changing the element to inline immediately after .slide() is called will negate the effect of the height animation. (Watch your console and you'll see the element's height animates but visually does nothing.)