title: How to implement a "read more" link with jQuery
body: <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>