Overview
The Expander Plugin is a simple little jQuery plugin to hide/collapse a portion of an element’s text and add a “read more” link so that the text can be viewed by the user if he or she wishes. By default, the expanded text is followed by a “re-collapse” link. Expanded text can also be re-collapsed at a specified time
The plugin consists of single method, .expander(), with a bunch of options.
Options
I need to clean up the options object. Until I get around to it, the following options are currently available:
slicePoint: 100, // the number of characters at which the contents will be sliced into two parts. // Note: any tag names in the HTML that appear inside the sliced element before // the slicePoint will be counted along with the text characters. widow: 4, // a threshold of sorts for whether to initially hide/collapse part of the element’s contents. // If after slicing the contents in two there are fewer words in the second part than // the value set by widow, we won’t bother hiding/collapsing anything. expandText: ‘read more’, // text displayed in a link instead of the hidden part of the element. // clicking this will expand/show the hidden/collapsed text expandPrefix: ’… ’, collapseTimer: 0, // number of milliseconds after text has been expanded at which to collapse the text again expandEffect: ‘fadeIn’, expandSpeed: ’’, // speed in milliseconds of the animation effect for expanding the text userCollapse: true, // allow the user to re-collapse the expanded text. userCollapseText: ‘[collapse expanded text]’, // text to use for the link to re-collapse the text userCollapsePrefix: ’ ’, /* CALLBACK FUNCTIONS
- all functions have the this keyword mapped to the element that called .expander()
*/
onSlice: null, // function() {}
beforeExpand: null, // function() {},
afterExpand: null, // function() {},
onCollapse: null // function(byUser) {}