demo.html

<!DOCTYPE html>

<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Readmore.js: jQuery plugin for long blocks of text</title>
  <meta name="description" content="A smooth, lightweight jQuery plugin for collapsing and expanding long blocks of text with &#8220;Read more&#8221; and &#8220;Close&#8221; links.">
  <meta name="author" content="Jed Foster">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->

  <style media="screen">
    body { font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; color: #444; }
    code { color: #777; font-family: "Source Code Pro", "Menlo", "Courier New", monospace;}
    a { color: #178DB1; }
    .container { margin: 0 auto; max-width: 960px; }
    #info + .readmore-js-toggle { padding-bottom: 1.5em; border-bottom: 1px solid #999; font-weight: bold;}
    #demo { padding: 0 10%; }
  </style>
</head>

<body>

  <div class="container">
    <header>
      <h1>Readmore.js</h1>

      <p>A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with &#8220;Read more&#8221; and &#8220;Close&#8221; links.</p>
    </header>

    <section id="info">
      <p>The markup Readmore.js requires is so simple, you can probably use it with your existing HTML—there&#8217;s no need for complicated sets of <code>div</code>&#8217;s or hardcoded classes, just call <code>.readmore()</code> on the element containing your block of text and Readmore.js takes care of the rest. Readmore.js plays well in a responsive environment, too.</p>

      <p>Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the &#8220;good&#8221; browsers are supported, as well as IE10+; IE8 &amp; 9 <em>should</em> work, but are not supported and the experience will not be ideal.</p>

      <h2 id="install">Install</h2>

      <p>Install Readmore.js with npm:</p>

      <pre><code>$ npm install readmore-js</code></pre>

      <p>Then include it in your HTML:</p>

      <pre><code class="html">&lt;script src=&quot;/node_modules/readmore-js/readmore.min.js&quot;&gt;&lt;/script&gt;</code></pre>

      <p>Or, using Webpack or Browserify:</p>

      <pre><code class="javascript">require('readmore-js');</code></pre>

      <h2 id="use">Use</h2>

      <pre><code class="javascript">$(&apos;article&apos;).readmore();</code></pre>

      <p>It&#8217;s that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.</p>

      <pre><code class="javascript">$(&apos;article&apos;).readmore({
  speed: 75,
  lessLink: &apos;&lt;a href=&quot;#&quot;&gt;Read less&lt;/a&gt;&apos;
});</code></pre>

      <h3 id="theoptions">The options:</h3>

      <ul>
        <li><code>speed: 100</code> in milliseconds</li>
        <li><code>collapsedHeight: 200</code> in pixels</li>
        <li><code>heightMargin: 16</code> in pixels, avoids collapsing blocks that are only slightly larger than <code>collapsedHeight</code></li>
        <li><code>moreLink: '&lt;a href=&quot;#&quot;&gt;Read more&lt;/a&gt;'</code></li>
        <li><code>lessLink: '&lt;a href=&quot;#&quot;&gt;Close&lt;/a&gt;'</code></li>
        <li><code>embedCSS: true</code> insert required CSS dynamically, set this to <code>false</code> if you include the necessary CSS in a stylesheet</li>
        <li><code>blockCSS: 'display: block; width: 100%;'</code> sets the styling of the blocks, ignored if <code>embedCSS</code> is <code>false</code></li>
        <li><code>startOpen: false</code> do not immediately truncate, start in the fully opened position</li>
        <li><code>beforeToggle: function() {}</code> called after a more or less link is clicked, but <em>before</em> the block is collapsed or expanded</li>
        <li><code>afterToggle: function() {}</code> called <em>after</em> the block is collapsed or expanded</li>
        <li><code>blockProcessed: function() {}</code> called once per block during initilization after Readmore.js has processed the block.</li>
      </ul>

      <p>If the element has a <code>max-height</code> CSS property, Readmore.js will use that value rather than the value of the <code>collapsedHeight</code> option.</p>

      <h3 id="thecallbacks">The callbacks:</h3>

      <p>The <code>beforeToggle</code> and <code>afterToggle</code> callbacks both receive the same arguments: <code>trigger</code>, <code>element</code>, and <code>expanded</code>.</p>

      <ul>
        <li><code>trigger</code>: the &#8220;Read more&#8221; or &#8220;Close&#8221; element that was clicked</li>
        <li><code>element</code>: the block that is being collapsed or expanded</li>
        <li><code>expanded</code>: Boolean; <code>true</code> means the block is expanded</li>
      </ul>

      <p>The <code>blockProcessed</code> callback receives <code>element</code> and <code>collapsable</code>.</p>

      <ul>
        <li><code>element</code>: the block that has just been processed</li>
        <li><code>collapsable</code>: Boolean; <code>false</code> means the block was shorter than the specified minimum <code>collapsedHeight</code>—the block will not have a "Read more" link</li>
      </ul>

      <h4 id="callbackexample">Callback example:</h4>

      <p>Here&#8217;s an example of how you could use the <code>afterToggle</code> callback to scroll back to the top of a block when the &#8220;Close&#8221; link is clicked.</p>

      <pre><code class="javascript">$(&apos;article&apos;).readmore({
  afterToggle: function(trigger, element, expanded) {
    if(! expanded) { // The &quot;Close&quot; link was clicked
      $(&apos;html, body&apos;).animate( { scrollTop: element.offset().top }, {duration: 100 } );
    }
  }
});</code></pre>

      <h3 id="removingreadmore">Removing Readmore:</h3>

      <p>You can remove the Readmore.js functionality like so:</p>

      <pre><code class="javascript">$(&apos;article&apos;).readmore(&apos;destroy&apos;);</code></pre>

      <p>Or, you can be more surgical by specifying a particular element:</p>

      <pre><code class="javascript">$(&apos;article:first&apos;).readmore(&apos;destroy&apos;);</code></pre>

      <h3 id="togglingblocksprogrammatically">Toggling blocks programmatically:</h3>

      <p>You can toggle a block from code:</p>

      <pre><code class="javascript">$(&apos;article:nth-of-type(3)&apos;).readmore(&apos;toggle&apos;);</code></pre>

      <h2 id="css">CSS:</h2>

      <p>Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the <code>max-height</code> property; &#8220;collapsing&#8221; is achieved by setting <code>overflow: hidden</code> on the containing block and changing the <code>height</code> property; and, finally, the expanding/collapsing animation is done with CSS3 transitions.</p>

      <p>By default, Readmore.js inserts the following CSS, in addition to some transition-related rules:</p>

      <pre><code class="css">selector + [data-readmore-toggle], selector[data-readmore] {
  display: block;
  width: 100%;
}</code></pre>

      <p><em><code>selector</code> would be the element you invoked <code>readmore()</code> on, e.g.: <code>$('selector').readmore()</code></em></p>

      <p>You can override the base rules when you set up Readmore.js like so:</p>

      <pre><code class="javascript">$(&apos;article&apos;).readmore({blockCSS: &apos;display: inline-block; width: 50%;&apos;});</code></pre>

      <p>If you want to include the necessary styling in your site&#8217;s stylesheet, you can disable the dynamic embedding by setting <code>embedCSS</code> to <code>false</code>:</p>

      <pre><code class="javascript">$(&apos;article&apos;).readmore({embedCSS: false});</code></pre>

      <h3 id="mediaqueriesandothercsstricks">Media queries and other CSS tricks:</h3>

      <p>If you wanted to set a <code>maxHeight</code> based on lines, you could do so in CSS with something like:</p>

      <pre><code class="css">body {
  font: 16px/1.5 sans-serif;
}

/* Show only 4 lines in smaller screens */
article {
  max-height: 6em; /* (4 * 1.5 = 6) */
}</code></pre>

      <p>Then, with a media query you could change the number of lines shown, like so:</p>

      <pre><code class="css">/* Show 8 lines on larger screens */
@media screen and (min-width: 640px) {
  article {
    max-height: 12em;
  }
}</code></pre>

      <h2 id="contributing">Contributing</h2>

      <p>Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature.</p>

      <p>Pull requests should include the minified script and this readme and the demo HTML should be updated with descriptions of your new feature. </p>

      <p>You&#8217;ll need NPM:</p>

      <pre><code>$ npm install</code></pre>

      <p>Which will install the necessary development dependencies. Then, to build the minified script:</p>

      <pre><code>$ gulp compress</code></pre>
    </section>

    <h1>Demo</h1>

    <section id="demo">

      <article>
        <h2>Artisanal Narwahls</h2>

        <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>

        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>

        <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>

        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
      </article>

      <article>
        <h2>Portland Leggings</h2>

        <p>Here's how it is: Earth got used up, so we terraformed a whole new galaxy of Earths, some rich and flush with the new technologies, some not so much. Central Planets, them was formed the Alliance, waged war to bring everyone under their rule; a few idiots tried to fight it, among them myself. I'm Malcolm Reynolds, captain of Serenity. Got a good crew: fighters, pilot, mechanic. We even picked up a preacher, and a bona fide companion. There's a doctor, too, took his genius sister out of some Alliance camp, so they're keeping a low profile. You got a job, we can do it, don't much care what it is.</p>

        <p>I am Duncan Macleod, born 400 years ago in the Highlands of Scotland. I am Immortal, and I am not alone. For centuries, we have waited for the time of the Gathering when the stroke of a sword and the fall of a head will release the power of the Quickening. In the end, there can be only one.</p>

        <p>From this distant vantage point, the Earth might not seem of any particular interest. But for us, it's different. Consider again that dot. That's here. That's home. That's us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives. The aggregate of our joy and suffering, thousands of confident religions, ideologies, and economic doctrines, every hunter and forager, every hero and coward, every creator and destroyer of civilization, every king and peasant, every young couple in love, every mother and father, hopeful child, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar," every "supreme leader," every saint and sinner in the history of our species lived there – on a mote of dust suspended in a sunbeam.</p>

        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
      </article>

      <article>
        <h2>This section is shorter than the Readmore minimum</h2>

        <p>Space, the final frontier. These are the voyages of the starship Enterprise. Its five year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before!</p>
      </article>
    </section>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script src="readmore.js"></script>

  <script>
    $('#info').readmore({
      moreLink: '<a href="#">Usage, examples, and options</a>',
      collapsedHeight: 384,
      afterToggle: function(trigger, element, expanded) {
        if(! expanded) { // The "Close" link was clicked
          $('html, body').animate({scrollTop: element.offset().top}, {duration: 100});
        }
      }
    });

    $('article').readmore({speed: 500});
  </script>
</body>
</html>