Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionalities to truncate a paragraph or any element as desired.
JavaScript
branch: master
Failed to load latest commit information.
test Initial version
LICENSE Initial version
README.md Initial version
collapser.jquery.json Done some corrections in the manifest
jquery.collapser.js Initial version
jquery.collapser.min.js Initial version

README.md

jQuery Collapser

Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionalities to truncate a paragraph or any element as desired.

Check out the working demo - Homepage

Why it is needed ?

Collapser is really useful to truncate long text in terms of characters, words or lines. It can also toggle the visibility elements. Hence 4 modes of operation in one plugin. Some practical examples are also demostrated.

Features

  • Four modes of operation
    • Truncate text by characters
    • Truncate text by words
    • Truncate text by lines
    • Show/hide element
  • HTML content present in the elements are preserved during the operation.
  • Simple and flexible API for using in varied applications.
  • Display remaining string count in the show/hide button.
  • No complicated syntax or alterations required, can be used readily.
  • Light weight only 4KB after minification.
  • Works in all browsers. Tested till IE 7 and it works !

Syntax

HTML:

<p class="myElement">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

JavaScript:

$('.myElement').collapser({
    mode: 'words',
    truncate: 20
});

Output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ... [Show text]

More demos

Documentation

Click here to see the docs of this plugin.

Requirements

  • jQuery 1.7+ thats it ..

License

Copyright (c) 2014 Aakash Chakravarthy, released under the MIT License.

Something went wrong with that request. Please try again.