jQuery More

Default Settings

The more functionality can easily be added to text with appropriate default settings.
You can also remove the more functionality if it is no longer required.

Default more: Remove

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#defaultMore').more();

$('#removeMore').toggle(function() {
		$(this).text('Re-attach');
		//$('#defaultMore').more('destroy');
alert($('#defaultMore span.more-ellipsis').length + ' ' + 
			$('#defaultMore span.more-ellipsis').siblings('span.more-hidden').length);
	},
	function() {
		$(this).text('Remove');
		//$('#defaultMore').more();
		$('#defaultMore span.more-ellipsis').toggle().
			siblings('span.more-hidden').toggle();
	}
);

You can override the defaults globally as shown below:

$.more.setDefaults({length: 150});

Processed fields are marked with a class of hasMore and are not re-processed if targetted a second time.

Options

Customise the more functionality through additional settings.

Custom length:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#lengthMore').more({length: 200});

Custom leeway:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum?

$('#leewayMore').more({leeway: 15});

Break between words:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#breakMore').more({wordBreak: true});

Expand only:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#expandMore').more({toggle: false});

Custom labels:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#labelMore').more({ellipsisText: '---',
	moreText: 'Maximise', lessText: 'Minimise'});

Graphic labels:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#graphicMore').more({
	moreText: '<img src="img/arrowS.gif" alt="Maximise">',
	lessText: '<img src="img/arrowN.gif" alt="Minimise">'});

Notification:

Pellentesque condimentum auctor justo et volutpat. Curabitur ut massa et lectus aliquam porta eget a ipsum? Proin fermentum eleifend ligula, non laoreet nisi elementum quis. Nulla erat enim, iaculis quis auctor commodo, pretium sit amet arcu. Suspendisse potenti. Morbi ut purus felis? Integer quis cursus quam. Suspendisse potenti. Ut et arcu tortor, a dapibus justo. Ut blandit elit sed augue mollis fringilla. Pellentesque at faucibus dolor.

$('#notifyMore').more({onChange: function(expanded) {
	alert('Paragraph ' + (expanded ? 'expanded' : 'collapsed'));
}});

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).more({
	length: 100, // Truncation length
	leeway: 5, // Overrun allowed without truncation
	wordBreak: false, // True to break between words, false to break anywhere
	toggle: true, // True to toggle, false to display and exit
	ellipsisText: '...', // Display text for ellipsis
	moreText: 'Show more', // Display text for more link
	lessText: 'Show less', // Display text for less link
	onChange: null // Callback function when expanded/collapsed
});

$.more.setDefaults(settings) // Change settings for all instances

$(selector).more('change', settings) // Change the instance settings

$(selector).more('settings') // Retrieve the instance settings

$(selector).more('destroy') // Remove the more functionality