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.

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE JS FILES

<script src="jquery.js"></script>
<script src="jquery.collapser.js"></script>

2. HTML

<p class="myElement">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

3. JAVASCRIPT

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

4. OPTIONS

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 arenext/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.

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.

$('.myElement').collapser({
	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.

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


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

5. METHODS

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