How to implement a "read more" link with jQuery
<p>I want to be able to display a shortened version of a long text field by default, but then have a "read more" link that would expand the field to its full version.  I have a pretty simple setup right now, but feel like there should be a more efficient way of doing this.</p>

<p>Here's my current code:</p>

<pre><code>$(document).ready(function () {

    $("#narrative-full").hide();

    $("a#show-narrative").click(function() {
        $("#narrative-short").hide();
        $("#narrative-full").show('fast');
    });
    $("a#hide-narrative").click(function() {
        $("#narrative-full").hide();
        $("#narrative-short").show('fast');
    });
});
</code></pre>

<p>This works, but seems clunky.  For example, it would be nice to have the original text not flicker or disappear briefly, but instead just smoothly expand. Any suggestions?</p>
