seemore.js

A lightweight jQuery plugin for easy collapse and expand of text.

Implementation

Simply download the seemore.js javascript file and include it in your project, then call the .seemore function on the query which you'd like to apply it to (see page source for example).

Basic Functionality

When Gregor Samsa woke up one morning from unsettling dreams, he found himself changed in his bed into a monstrous vermin. He was lying on his back as hard as armor plate, and when he lifted his head a little, he saw his vaulted brown belly, sectioned by arch-shaped ribs, to whose dome the cover, about to slide off completely, could barely cling. His many legs, pitifully thin compared with the size of the rest of him, were waving helplessly before his eyes.

$('.ex1').seemore();

Varying the initial amount displayed

$('.ex2').seemore({max_tokens: 40, expand_by_default: true});

$('.ex3').seemore({max_chars: 120});

Adding postfixes

$('.ex4').seemore({max_tokens: 30, postfix: '...'});

Custom Link Text

$('.ex5').seemore({max_tokens: 30,
	postfix: '...',
	more_link_text: "*continue reading*",
	less_link_text: "(less)"});

Callbacks

$('.ex6').seemore({max_tokens: 30,
	postfix: '...',
	expand_callback: function () {
		alert("HELLO");
	}
});

Available Options

`max_chars`	Characters to show in the collapsed version. Defaults to 30.
`max_tokens`	Tokens to show in the collapsed version. Tokens are delimited by `token_delimiter`. Without setting `token delimiter`, tokens will be words with spaces in between.
`token_delimiter`	A string to delimit tokens by. Defaults to a single space character.
`postfix`	A string to add to the end of the collapsed version, before the link. Defaults to &uot;...".
`more_link_text`	Text of the "see more" link. Defaults to "(more)".
`less_link_text`	Text of the "see less" link. Defaults to "(less)"
`default_more_display`	The CSS `display` property of the wrapper element for the expanded block of text (the part that is hidden initially). Defaults to "inline".
`default_link_display`	The CSS `display` property of the "see less" and "see more" links. Defaults to "inline".
`expand_callback`	A function called when the text expands.
`collapse_callback`	A function called when the text collapses
`expand_by_default`	Defaults to `false`. If true, the text will start out expended and the "less" link will appear by default.
`link_class`	A string to add to the class property of the "see more" and "see less" links, for easy styling.

Commands

`.seemore("expand")`	Expand the already intialized text.
`.seemore("collapse")`	Collapse the already initialized text.
`.seemore("raw")`	Provides raw access to the Seemore object (if needed).
`.seemore(options)`	Instantiates or reinstantiates a seemore instance.