How do I add fade in effect when I click expand on this script?
<p>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.  </p>

<p>How do I do this?</p>

<pre><code>$(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() &gt; maxheight + allowedExtraLines * lineheight) {
        text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });
        var link = $('&lt;a href="#"&gt;' + showText + '&lt;/a&gt;');
        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 = $('&lt;div&gt;&lt;/div&gt;');
        linkDiv.append(link);
        $(this).after(linkDiv);
    }
});
</code></pre>

<p>});</p>
