Expander plugin details

Add HTML markup to your page for elements that you want to be expandable. For example: 

<div class="expandable">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed dot eiusmod tempor
     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.
    </p>
    <p>Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt inre culpa qui
    officia deserunt mollit anim id est laborum.
    </p>
  </div>

Include the jQuery core file and the Expander plugin in your document. 

After these scripts are referenced, you can reference a custom script 

file to modify the expandable elements. 

You may, of course, name this custom file anything you wish and place it 

anywhere on your server. 

It is named custom.js here and placed in the "scripts" directory 

for demonstration purposes only.  

<script src="jquery.js"></script>
<script src="jquery.expander.js"></script>

<script src="/scripts/custom.js"></script>

In your custom script, select the elements you want to expand/collapse 

and call the .expander() method, with or without options.

// you can override default options globally, so they apply to every .expander() call
$.expander.defaults.slicePoint = 120;

$(document).ready(function() {
  // simple example, using all default options unless overridden globally
  $('div.expandable p').expander();

  // *** OR ***

  // override default options (also overrides global overrides)
  $('div.expandable p').expander({
    slicePoint:       80,  // default is 100
    expandPrefix:     ' ', // default is '... '
    expandText:       '[...]', // default is 'read more'
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is 'read less'
  });

});