Submit your widget

jQuery plugin text hidden and expand

Created 13 years ago   Views 7868   downloads 1386    Author n/a
jQuery plugin text hidden and expand
View DemoDownload
Share |

The first in the series is called ‘truncatable‘. Simply put truncatable is a lightweight truncation plugin for jQuery. Designed for users who want to be able to hide and expand text on a page. This plugin is very SEO friendly, and ideal for environments where it is not possible to use PHP.


To use the plugin simply add an id or class to the text that you would like to truncate:

<p class="myClass">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit,
 odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum,
 feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. eget lectus et ligula hendrerit


You will need to  call the plugin in the head of your document. Please note that you will will need to include jQuery before you call the plugin:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.truncatable.js"></script>


To initate the plugin simply call it on your class like so:

$(function {


Options for truncatable

truncatable enables the user to define the limit of letters to be displayed on the truncatable plugin. As a default 100 words will be display unless you specify otherwise like so:

$('.myClass').truncatable({    limit: 200, more: '.....', less: true, hideText: '[hide]' });