Include jQuery and jQuery collapser in the page. Attach the collapser method to the elements after the DOM is ready to be manipulated.

Demo page

<script src="jquery.js"></script>
<script src="jquery.collapser.js"></script> <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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <script> $(document).ready(function(){ $('.myElement').collapser({ mode: 'words', truncate: 20 }); }); </script>

Properties list

Below is the complete list of properties supported by collapser. The values given below are the defaults.

	target: 'next',
	mode: 'block',
	speed: 'slow',
	truncate: 2,
	ellipsis: '...',
	effect: 'fade',
	controlBtn: 'dsfdsf',
	showText: 'Show more',
	hideText: 'Hide text',
	showClass: 'show-class',
	hideClass: 'hide-class',
	atStart: 'hide',
	lockHide: false,
	dynamic: false,
	changeText: false,
	beforeShow: null,
	afterShow: null,
	beforeHide: null,
	afterHide: null
mode – string
The mode of operation of the plugin. Accepted values are,

  • chars: To truncate characters
  • words: To truncate words
  • lines: To truncate lines
  • block: To toggle a selected elements
target – string or function
This element to be selected for toggling in “block” mode is specified here. Other modes dont use this value. If the value is a string, then accepted values are next/prev/siblings. This selects the element which is next/prev/sibling to the current one. If the value is a function then it should return the selected element.
speed – string or number
The speed of transition of the height transtion during the element collapse. Accepted values are time in milliseonds and strings: slow/medium/fast
ellipsis – string
The text displayed next to the hidden element to indicate the presence of more content. Accepts both text and HTML string.
effect – string
The type of effect when toggling elements in “block” mode of operation. Accepted values are “fade” for fadeIn/fadeOut transitions and “slide” for slideUp/slideDown transitions
controlBtn – string or function
The expand/collapse button selector. When the value is a,

  • string: the control button is automatically created and the value is used as “class name”
  • function: the control button is not created and hence the function should return a jQuery element
showText and hideText – string
The text/HTML to be present in the control button when the element is in collapsed and expanded state repectively.
showClass and hideClass – string
The class name of the element when it is in expanded and collapsed state respectively.
stStart – string or function
The default state of the element when the page is loaded. Accepted strings are “show” and “hide”. The value “show” makes the element to be expanded by default and “hide” does the opposite. If a function is used, then it should return either “show” or hide”. This value is overridden when the element has a data-start attribute. The accepted values remains the same. Check out the demo.
lockHide – boolean
This property removes the “hide” button once the content is expanded. Accepts boolean value.
dynamic – boolean
This property updates the remaining characters/words/lines count when the browser window is resized. Accepts boolean value.
changeText – boolean
This property changes the text of the element during the collapse and expand state. It is used only in “block” mode of operation and is not used by other modes.
Callbacks – function
  • beforeShow: This function is triggered before the expand event
  • afterShow: This function is triggered after the expand event
  • beforeHide: This function is triggered before the collapse/hide event
  • afterHide: This function is triggered after the collapse/hide event

Using function as values

Some of the properties listed above accept functions as value. These functions accept only one formal parameter. This parameter is an object which holds all the public methods used in the plugin.

	mode: 'chars',
	afterShow: function( myParam ){
		// use myParam to access the methods defined in the plugin.

this keyword within the function

The “this” keyword used within the function points to the current element where collapser is attached. This is useful to manipulate the element and target other DOM elements relative to the current element. This is demonstrated in the demo page, check it out.

<h2>Heading <a href="#" class="myControlBtn">Dummy</a> </h2>
<p class="myElement">Some text to truncate b characters ...</p>

// jQuery
	mode: 'chars',
	controlBtn: function( myParam ){
		return $(this).parent().find( '.myControlBtn' );

Methods available

Collapser has some methods which can be used externally to control the element. They are,

  • show: accepts two parameters, one the element with collapser attached to expand and the other to specify the transition speed.
  • hide: accepts two parameters, one the element with collapser attached to collapse and the other to specify the transition speed.
  • reInit: accepts one parameter, the element with collapser attached to reInit

Add your comment 8 Comments so far

  • Will Belden

    I’m not really seeing how to get the ellipsis to show at the end of the visible text. Setting ‘showText’ to an empty string at least gets rid of the ‘Show More’, but just not seeing the ‘…’ output. Unlike everything else I’ve tried, though, at least this plugin actually limits to the desired line count.

    • If you want the “…”, then you can remove the “ellipsis” property being used in the options. By default the value of “ellipsis” is set to “…”

  • Thanks for your posting. Well described in all aspects of content expanding and collapsing.

  • karks88

    Great plugin! Is there a way to make a div element clickable, rather than needing to use a standard link tag?

  • Hi, how do you stop it from stripping tags? When lines are not longer than truncate settings, the paragraph tags are not preserved, instead are stripped.

  • Hi Aakash, could you provide an example of how to use the methods mentioned in this page? Many thanks!

  • Ron Peperkamp

    Thanks a lot Aakash – this is a very handy plugin! Works flawlessly with regular HTML content.

    Unfortunately it doesn’t seem to work with dynamic (php) generated content. Also code of other jquery scripts in the content (like images with lightbox-links) is not processed. I would be very grateful if you have a solution for these issues.

  • Curtis Tammany

    Is it possible to expand/collapse multiple blocks simultaneously with one button?