A jQueryplugin
that truncates extended text and allows it to be shown dynamically.
The current version is 2.0.1 and is available
under the MIT licence.
For more detail see the documentation reference page.
Or see a minimal page that you could
use as a basis for your own investigations.
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:
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.
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.
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.
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.
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.
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.
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.
$('#andNextMore').more({andNext: 'p'});
Embedded Tags
The plugin can also handle embedded HTML tags that lie across the text truncation point.
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.
$('#embedMore').more();
In the Wild
This tab highlights examples of this plugin in use "in the wild".
None as yet.
To add another example, please contact me (wood.keith{at}optusnet.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
ignoreTags: ['br', 'hr', 'img'], // Non-terminated tags to ignore
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
andNext: '', // Selector for any following tags to include in the collapse
onChange: null // Callback function when expanded/collapsed
});
$.more.setDefaults(settings) // Change settings for all instances
$(selector).more('option', settings) // Change the instance settings
$(selector).more('option', name, value) // Change an instance setting
$(selector).more('option', name) // Retrieve an instance setting
$(selector).more('destroy') // Remove the more functionality
Usage
Include the jQuery library (1.4+) in the head section of your page.