Collapse Long Text Block With Read More/Less Buttons

Preview:

Description:

A lightweight, unobtrusive JavaScript library for collapsing and expanding a long block of text with Read More & Read Less buttons.

How to use it:

1. Add the main script read-more-btn-v2.js to the page.

<script src="scripts/read-more-btn-v2.js"></script>

2. Attach the function mkBtn to the text block and determine the number of characters to be retained.

<main>
  <article>
    <p>
      In a village of La Mancha, in Spain, there once lived one of those gentlemen who usually keep a lance upon a
      rack, an old target, a lean horse, and a greyhound for coursing. A dish of boiled meat, consist-ing of somewhat
      more beef than mutton, the fragments served up cold on most nights, lentils on Fridays, bread and pull-it on
      Saturdays, with a small pigeon by way of addition on Sundays,consumed three fouiths of his income. The rest was
      laid out in a surtout of fine black cloth, a pair of velvet breeches for holidays, with slippers of the same;
      and on week-days he prided himself on the very best of his own homespun doth. </p>
    <p>His family consisted of a housekeeper, somewhat above forty, a niece not quite twenty, and a lad for the field
      and the market, who both saddled the horse and handled the pruning-hook. The age of our gentleman bordered upon
      fifty years. He was of a robust constitution, spare-bodied, of a meagre visage; a very early riser, and a keen
      sportsman.
    </p>
  </article>
</main>

mkBtn('article', 30);