Slide Toggle Not working on Slide Up

Question

I have a content with Read More option, when ever user clicks on Read more the content expands, the main functionality working find, but i want the content to appear as slide down and up slowly, the up function works fine but slide down comes up instantly. Sorry For my English.

HTML

<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>

<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>

CSS

.comment {
    font-size: 18px;
    letter-spacing: 0.12em;
    max-width: 800px;
}
a.morelink{text-decoration:none;outline:none}.morecontent span{display:none}

JS

$(document).ready(function() {
    var showChar = 200;
    var ellipsestext = "...";
    var moretext = "Read More";
    var lesstext = "Close";
    $('.more').each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);
            var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });
    $(".morelink").click(function() {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().slideToggle();
        $(this).prev().slideToggle();
        return false;
    });
});

JSFIDDLE DEMO --> http://jsfiddle.net/039zkqbL/11/

Answer 1

I have developed a quick solution in a rush (so probably not the most elegant, but it works) : Run it below

var minChars = 200,
    readMoreEllipsis = "<span class='ellipsis'>... <a href='#' class='readmore'>Read more</a></span>",
    readLessEllipsis = "<span class='ellipsis'><a href='#' class='readmore'>Read less</a></span>";

$(".more").each( function(){
    var self = $(this),
        origText = self.text();
        
    self.attr("data-original-text", origText) // Storing original text in attributes
        .attr("data-full-height", self.height()) // Storing minimum height in attributes
        .html(origText.substr(0,minChars) + readMoreEllipsis)
        .attr("data-condensed-height", self.height()); // Storing minimum height in attributes
    
});


$(document).on('click', "a.readmore", function(){
    var self= $(this),
        paragraph = self.parent().parent(),
        origText = paragraph.attr("data-original-text"),
        minHeight = paragraph.attr("data-condensed-height"),
        maxHeight = paragraph.attr("data-full-height");
    
    if(paragraph.attr('data-expanded')==='true'){
        paragraph
            .attr('data-expanded','false')
            .css("border","green dashed 1px")
            .css("max-height",maxHeight+"px")
        targetHeight = minHeight;
    }else{
        paragraph
            .attr('data-expanded','true')
            .css("border","red dashed 1px")
             .css("max-height",minHeight+"px")
            .html(origText + readLessEllipsis)
        targetHeight = maxHeight;
    }
    
    paragraph.animate({
        maxHeight : targetHeight
    },
    1000,
    function(){ // Animation callback. Launched after the collapse or expand has finished.
        if(paragraph.attr('data-expanded')==='true') return;
        paragraph.html(origText.substr(0,minChars) + readMoreEllipsis);
    });
    
});

div.more{
   display: block;
   overflow:hidden;
    border: blue solid 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>
<br><br>
<div class="comment more">
As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t t t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client. As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.As the founder of lol and lol of the deisng lol and design principal, Ken works closely with designers and project managers throughout the project. In t this leadership role, he supervises client.
</div>