Tuesday, April 15, 2014

jQuery Accordion with Expand All / Collapse All


jQuery Accordion with Expand All / Collapse All

Lightweight plugin of accordion with expand/collapse functionality.

Here is example of Accordion with expand/collapse functionality. Click on header to expand/collapse content. Below demonstrated how to use this plug-in.

In this demo you can attache accordion to any HTML element. Just you need to attach function. See below example how to attach it to any Class or ID.

$(document).ready(function(e) {
  $("dl.accordion").accordionCD({heading:"dt",content:"dd"});
});

OR

$(document).ready(function(e) {
  $("dl#accordion").accordionCD({heading:"dt",content:"dd"});
});

It is necessary to provide “heading” & “content” tag to render your accordion.

Demo:
Expand All | Collapse All
Panel 1
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Panel 2
felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Panel 4
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Panel 5
felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Parameter to pass in plugin:
heading  :  null  //mandatory to provide Heading tag to attach event
content  :  null  //mandatory to provide Content to show/hide
headingEvent  : "click"   //Attach Event
active : 0   //By default visible element
callapsAll  :  false   //to hide all on page load
expandAll  :  "expandAll"   //Element name on Expand All Functionality attached
collapsAll  :   "collapsAll"   //Element name on Collapse All Functionality attached
headingClass  :  "accordion-header"   //Accordion Heading Class
contentClass  :  "accordion-content"   //Accordion Content Class
Plug-in Minified Version:
HTML Code:
<div class="option"><a href="#" class="expandAll">Expand All</a> | <a href="#" class="collapsAll">Collapse All</a></div>
<dl class="accordion">
<dt>Panel 1</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>Panel 2</dt>
<dd>felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt>Panel 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
<dt>Panel 4</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>Panel 5</dt>
<dd>felis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt>Panel 6</dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>
CSS:
.accordion { width:100%; background:#f2f2f2; border-top:solid 1px #999;}
.accordion-header { padding:10px; border-bottom:solid 1px #999; cursor:pointer;border-left:solid 5px #f2f2f2; display:block;}
.accordion-content { display:none; padding:0; margin:0; padding:10px 20px; border-bottom:solid 1px #999; border-left:solid 5px #999; background:#FFF; }
.accordion-header.selected { border-bottom:none;border-left:solid 5px #999; border-bottom: dashed 1px #999; background:#FFF;}
.expandAll, .collapsAll { text-decoration:none; color:#000;}
.expandAll.selected, .collapsAll.selected { color:#F00;}
Demo Download

Share your input/comment to improve this plug-in more effective.