Question

I found this content expand/collapse jQuery plugin. I want to add fade-in effect to this plugin when I click on the EXPAND button.

How do I do this?

$(document).ready(function () {
var maxlines = 15;
var lineheight = 15; // line height in 'px'
var maxheight = (maxlines * lineheight);
var allowedExtraLines = 3;
var showText = "EXPAND";
var hideText = "CLOSE";
$('.ranking').each(function () {
    var text = $(this);
    if (text.height() > maxheight + allowedExtraLines * lineheight) {
        text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
        var link = $('<a href="#">' + showText + '</a>');
        link.click(function (event) {
            event.preventDefault();
            if (text.css('height') == 'auto') {
                $(this).html(showText);
                text.css('height', maxheight + 'px');
            } else {
                //$(this).remove();
                $(this).html(hideText);
                text.css('height', 'auto');
            }
        });
        var linkDiv = $('<div></div>');
        linkDiv.append(link);
        $(this).after(linkDiv);
    }
});

});

Answer 1

within the link.click function, you can do

text.animate({ opacity: 1.00 }, 600);

i think it’d go after text.css(‘height’, ‘auto’); in the else block. you’ll probably have to reset the opacity to 0 somehow in the if block too.

for reference: http://api.jquery.com/animate/

edit: better yet, http://api.jquery.com/fadeIn/

so

text.fadeIn();