accordion: April 2014

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"});

});

$(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:

Download accordion-cignex-min.js

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;}

Tuesday, April 15, 2014

jQuery Accordion with Expand All / Collapse All