Reading More

Step 1

Add this block of code inside your page's <head> tag, preferably right under the <link> to your stylesheet:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jedfoster/Readmore.js/master/readmore.js"></script>

Step 2

Find a <div>, <p>, or other tag you want to make collapsible. Give it the class of "readmore".

Step 3

Place this block of code on a line just before </body>:

<script type="text/javascript">
  $(".readmore").readmore();
</script>

You're done.

Additional info can be found here.

Setting some options

Replace the last bit with something like this. Each extra line is optional and the value can be changed to whatever you like.

$(".readmore").readmore({
  speed: 75, // how fast to animate
  maxHeight: 500 // how much to show, in pixels, before the link to read more
});

All the possible options:

THE OPTIONS:

speed: 100, // (in milliseconds)
maxHeight: 200, // (in pixels)
heightMargin: 16, // (in pixels, avoids collapsing blocks that are only slightly larger than maxHeight)
moreLink: '<a href="#">Read more</a>', // (raw HTML)
lessLink: '<a href="#">Close</a>', // (raw HTML)
embedCSS: true, // (insert required CSS dynamically, set this to false if you include the necessary CSS in a stylesheet)
sectionCSS: 'display: block; width: 100%;', // (sets the styling of the blocks)
startOpen: false, // (do not immediately truncate, start in the fully opened position)
expandedClass: 'readmore-js-expanded', // (class added to expanded blocks)
collapsedClass: 'readmore-js-collapsed', // (class added to collapsed blocks)
beforeToggle: function() {}, // (called after a more or less link is clicked, but before the block is collapsed or expanded)
afterToggle: function() {} // (called after the block is collapsed or expanded)

phroa/readmore.md