Jquery collapser plugin – Demo

HTML

<script src="http://www.aakashweb.com/resources/js/jquery.collapser.js"></script>
<div class="boxes">
    <h3>Basic Usage (Demo 1) </h3>
    <h4 class="demo1">Collapse Text</h4>
    <p>Lorem Ipsum is simply dummy text of<br> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</p>
</div>

<div class="boxes">
    <h3>Target previous element (Demo 2) </h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</p>
    <h4 class="demo2">Collapse Text</h4>
</div>

<div class="boxes">
    <h3>Add fade effect (Demo 3) </h3>
    <h4 class="demo3">Click here to collapse and this text will not change</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</p>
</div>

<div class="boxes">
    <h3>Target siblings (Demo 4) </h3>
    <h4 class="demo4">Click here to collapse everything ...</h4>
    <p>Paragraph 1 .... </p>
    <p>Paragraph 2 .... </p>
    <p>Paragraph 3 .... </p>
    <p>Paragraph 4 .... </p>
</div>

<div class="boxes">
    <h3>Add callback before and after collapse (Demo 5) </h3>
    <h4 class="demo5">Click here to see the callback</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>    
</div>

<div class="boxes">
    <h3>Create a very simple accordion using callbacks (Demo 6) </h3>
    <h4 class="demo6">Heading 1</h4>
    <div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    
    <h4 class="demo6">Heading 2</h4>
    <div...

CSS

.boxes{
    border-bottom: 1px solid gray;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
h3{
    text-decoration: underline;
}
h4{
    cursor: pointer;
}
.expArrow{
    padding-left: 20px;
    background: url(http://www.aakashweb.com/resources/images/pages/jquery-collapser/arrow-down.png) no-repeat 0px 4px;
}
.collArrow{
    padding-left: 20px;
    background: url(http://www.aakashweb.com/resources/images/pages/jquery-collapser/arrow-up.png) no-repeat 0px 4px;
}
.expIco{
    padding-left: 20px;
    background: url(http://www.aakashweb.com/resources/images/pages/jquery-collapser/plus.gif) no-repeat 0px 4px;
}
.collIco{
    padding-left: 20px;
    background: url(http://www.aakashweb.com/resources/images/pages/jquery-collapser/minus.gif) no-repeat 0px 4px;
}
.demo6{
    border: 1px solid #B9E3FF;
    background: #09F;
    padding: 5px;
    color: white;
    margin: 0 0 -1px 0;
}
.panel{
    border: 1px solid #B9E3FF;
    padding: 10px;
}

JavaScript

/** Demo 1 **************************/

    $('.demo1').collapser({
        target: 'next',
        targetOnly: 'p',
        expandHtml: 'Expand Text',
        collapseHtml: 'Collapse Text',
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });
    
    /** Demo 2 ****************************/
    
    $('.demo2').collapser({
        target: 'prev',
        targetOnly: 'p',
        expandHtml: 'Expand Text',
        collapseHtml: 'Collapse Text',
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });
    
    /** Demo 3 ******************************/
    
    $('.demo3').collapser({
        target: 'next',
        effect: 'fade',
        changeText: 0,
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });
    
    /** Demo 4 *******************************/
    
    $('.demo4').collapser({
        target: 'siblings',
        effect: 'fade',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    });
    
    /** Demo 5 ********************************/

    $('.demo5').collapser({
        target: 'next',
        effect: 'slide',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    }, function(){
        alert('Before collapse');
    }, function(){
        alert('After collapse');
    });
    
    /** Demo 6 **********************************/
    
    $('.panel').hide();
    
    $('.demo6').collapser({
        target: 'next',
        effect: 'slide',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    }, function(){
        $('.panel').slideUp();
    });
    
    /** Demo 7 ***********************************/
    
    $('.demo7').collapser({
        target: 'siblings',
        effect: 'slide',
        expandHtml: 'Expand List',
        collapseHtml: 'Collapse List',
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });
    
    /** Demo 8...