Question

I’m currently creating an jQuery Plugin called Truncate – The Purpose of it is to shorten a passage.

The problem is that the first time you click Show More instead of sliding down the hidden part of the paragraph, it just shows it.

My Defaults are:

 var defaults = {
            length: 120,
            MinExtra: 50,
            ShowMoreText: 'Show More',
            ShowLessText: 'Show Less',
            EllipsisText: '...',
            ShowLessAndMoreColor: 'black',
            SlideDownTime: 700,
            SlideUpTime: 700
        };

Then I have the little var to make it function:

var options = $.extend(defaults, options);

With some extra code:

 this.each(function() {
            obj = $(this);
            var body = obj.html();
            obj1 = $(this);
            var body1 = obj1.html();

Then I have the main code which is:

if (body1.length > options.length + options.MinExtra) {
                var splitLocation = body1.indexOf(' ', options.length);
                if (splitLocation != -1) {
                    // truncate tip
                    splitLocation = body1.indexOf(' ', options.length);
                    var str1 = body1.substring(0, splitLocation);
                    var str2 = body1.substring(splitLocation, body1.length - 1);
                    obj.html(str1 + '<span class="truncate_ellipsis">' + options.EllipsisText + '</span>' + '<span class="truncate_more">' + str2 + '</span>');
                    obj.find('.truncate_more').css("display", "none");
                    // insert more link
                    obj.append('<div class="clearboth" style="cursor:pointer;color:' + options.ShowLessAndMoreColor + ';">' + '<a href="#" class="truncate_more_link">' + options.ShowMoreText + '</a>' + '</div>');
                    // set onclick event for more/less link
                    var moreLinki = $('.truncate_more_link', obj1);
                    var moreContenti = $('.truncate_more', obj1);
                    var ellipsisi = $('.truncate_ellipsis', obj1);
                    moreLinki.click(function() {
                        if (moreLinki.text() == options.ShowMoreText) {
                            moreContenti.slideDown(options.SlideDownTimer);
                            moreLinki.text(options.ShowLessText);
                            ellipsisi.css("display", "none");
                        }
                        else {
                            moreContenti.slideUp(options.SlideUpTime);
                            moreLinki.text(options.ShowMoreText);
                            ellipsisi.css("display", "inline");
                        }
                        return false;
                    });
                }
            }
        });
    };
})(jQuery);

You can start it using:

$(document).ready(function() {
    $('#example').Truncate();
});

Or define options with it:

$(document).ready(function() {
    $('#example').Truncate({
    length: 120,
            MinExtra: 50,
            ShowMoreText: 'Show More',
            ShowLessText: 'Show Less',
            EllipsisText: '...',
            ShowLessAndMoreColor: 'black',
            SlideDownTime: 700,
            SlideUpTime: 700


});
});

Still don’t understand the problem? Please see the Example.

Hope someone can give me any idea of how to stop this. Thanks!

Answer 1

This happens because the span initially has a display set to inline. and inline elements don’t use width and height, so you cant animate them. Once you finish a slideDown it becomes inline-block so subsequent slideUp and slideDown animations work.

You can “fix” it by setting it to be inline-block before hiding it.

obj.find('.truncate_more').css("display", "inline-block").hide();

You can try it out here: http://jsfiddle.net/LAhsp/2/

The only issue is that it appears on a new line. But this happens in your version as well ( after initially opening and closing it).