jQuery Collapser - Demo Page

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.

Get started Fork on Github

Practical examples

Google+ like expand post feature using collapser

Aakash Chakravarthy Posted 2 days ago

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

View code 

<div class="gpwrap">
    <img src="https://lh6.googleusercontent.com/-oDY5lt3j20o/AAAAAAAAAAI/AAAAAAAAAAA/LIaSRRwrnB4/s32-c/photo.jpg" /> <b>Aakash Chakravarthy</b> <small>Posted 2 days ago</small>
    <hr/>
    <div class="gppost"><p>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.</p>
    
    <p>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.</p></div>
</div>
$('.gpwrap .gppost').collapser({
    mode: 'lines',
    truncate: 5,
    showText: 'Read more( %s )',
    afterHide: function(q){
        q.o.showText = 'Read more( ' + q.remaining + ' lines )';
    }
});

.gpwrap{
    width: 400px;
    border: 1px solid #CCC;
    padding: 15px;
    margin: 25px 0;
    box-shadow: 0 0 6px -2px #000;
}
.gpwrap p{
    margin: 0 0 25px 0;
}
.gppost.hide-class > div{
    position: relative;
}
.gppost.hide-class > div:after{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient( rgba(255,255,255,0), #fff);
}

Simple accordion using collapser in "block" mode

A simple demonstration of how collapser can be turned into an accordion using its API in 2 lines of code

Heading 1

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

Heading 2

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

Heading 3

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

Heading 4

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

View code 

<h5 class="acc-head" data-start="show">Heading 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

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

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

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

$('.acc-head').collapser({
    mode: 'block',
    target: 'next',
    effect: 'slide',
    beforeShow: function( ){
        $('.acc-head').each( function(){
            var dataVar = $(this).data('collapser'); 
            if( dataVar ) dataVar.hide( $(this) );
        });
    }
});

.acc-head{
    background: #FF3333;
    color: #fff;
    padding: 10px;
    margin: 0 0 1px 0;
}
.acc-head.hide-class{
    background: green;
}
.acc-head + p{
    border: 1px solid #ccc;
    padding: 15px;
    border-width: 0 1px 1px 1px;
    margin: 0;
}

Comments collapser in blogs

Aakash Chakravarthy
15 01 2014

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

Aakash Chakravarthy
16 01 2014

Nice one

Aakash Chakravarthy
17 01 2014

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.

View code 

<div class="cmt-box">
    <img src="http://0.gravatar.com/avatar/3?s=64&d=wavatar" class="pull-left" />
    <h5>Aakash Chakravarthy</h5>
    <small>17 01 2014</small>
    <hr/>
    <p>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. </p>
</div>

$('.cmt-box p').collapser({
    mode: 'words',
    truncate: 10
});

.cmt-box{
    border: 1px solid #CCC;
    padding: 15px;
    background: #FCFCFC;
    margin: 0 0 10px 0;
}
.cmt-box h5{
    font-weight: bold;
}
.cmt-box img {
    margin: 0 15px 0 0;
}
.cmt-box p{
    margin: 0;
}

Simple tree navigation using block mode of collapser

View code 

<ul class="col-tree">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Duis aute irure dolor</li>
    <li><a href="#">sed do eiusmod tempor</a>
        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Duis aute irure dolor</li>
        </ul>
    </li>

    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
</ul>

$('.col-tree a').collapser({
    mode: 'block',
    effect: 'slide',
    showClass: 'col-tree-show',
    hideClass: 'col-tree-hide',
});

.col-tree li{
    padding: 5px 0;
}
.col-tree-show{
    background: url('images/plus.png') left no-repeat;
    padding: 0 0 0 20px;
}
.col-tree-hide{
    background: url('images/minus.png') left no-repeat;
    padding: 0 0 0 20px;
}

Go to first page