Home > Uncategorized > Jquery collapser – Demo

Jquery collapser – Demo

| 144 views
Demo of the Jquery collapser plugin
Shares
<div class="boxes">
    <h3>Basic Usage (Demo 1) </h3>
    <h4 class="demo1">Collapse Text</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 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 class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    
    <h4 class="demo6">Heading 3</h4>
    <div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    
    <h4 class="demo6">Heading 4</h4>
    <div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>

<div class="boxes">
<h3>Make a list collapser (Demo 7) </h3>
<ul>
    <a href="#" class="demo7">Collapse List</a>
    <li>List 1</li>
    <li>List 2
      <ul>
        <a href="#" class="demo7">Collapse List</a>
        <li>Sub List 1</li>
        <li>Sub list 2</li>
        <li>Sub list 3
          <ul>
                <a href="#" class="demo7">Collapse List</a>
              <li>Sub sub List 1</li>
              <li>Sub sub List 2</li>
              <li>Sub sub List 3</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>List 3 </li>
    <li>List 4 </li>
</ul>
</div>

<div class="boxes">
<h3>Target multiple elements (Demo 8)</h3>
<h4 class="demo8">Click here to collapse multiple elements below</h4>
<span>A &lt;span&gt; element .....</span><br />
<input type="text" a value="A input box ...."/><br />
<p class="para">A paragraph ....</p>
</div>

<div class="boxes">
    <h3>Detection of pre hidden elements (Demo 9) </h3>
    <h4 class="demo9">Collapse Text</h4>
    <p style="display:none">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>
.boxes{
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
h3{
    color: #FF005C;
}
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;
}
$(function(){
/** 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 ************************************/
    
    $('.demo8').collapser({
        target: '.para , input[type=text], span',
        effect: 'fade',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    });
    
    /** Demo 9 ***********************************/
    
    $('.demo9').collapser({
        target: 'next',
        targetOnly: 'p',
        expandHtml: 'Expand Text',
        collapseHtml: 'Collapse Text',
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });

});

Basic Usage (Demo 1)

Collapse Text

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

Target previous element (Demo 2)

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

Collapse Text

Add fade effect (Demo 3)

Click here to collapse and this text will not change

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

Target siblings (Demo 4)

Click here to collapse everything ...

Paragraph 1 ....

Paragraph 2 ....

Paragraph 3 ....

Paragraph 4 ....

Add callback before and after collapse (Demo 5)

Click here to see the callback

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

Create a very simple accordion using callbacks (Demo 6)

Heading 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Heading 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Heading 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Heading 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Make a list collapser (Demo 7)

Target multiple elements (Demo 8)

Click here to collapse multiple elements below

A <span> element .....

A paragraph ....

Detection of pre hidden elements (Demo 9)

Collapse Text

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