jQuery Plugin For Expanding And Collapsing HTML Content - ExpanderPro.js

ExpanderPro.js is a tiny jQuery accordion plugin for expanding and collapsing html content by clicking the title trigger, with a subtle & configurable animation.

How to use it:

1. Create an accordion interface following the Html structure listed below.

<section class="list">
<div class="expandee">
<div class="trigger">Trigger</div>
<div class="target">Target</div>
</div>
<div class="expandee">
<div class="trigger">Trigger</div>
<div class="target">Target</div>
</div>
<div class="expandee">
<div class="trigger">Trigger</div>
<div class="target">Target</div>
</div>
</section>

2. Load the jQuery javascript framework and jQuery ExpanderPro.js at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.expanderpro.min.js"></script> 

3. Initialize the plugin with available options.

<script>
$(document).ready(function(){
$('.list').expanderPro({
expandItem: "expandee",// Item class
triggerClass: "trigger",// Trigger class
targetClass: "target",// Target class
expandedClass: "expanded",// Expanded class
hoverClass: "over",// If not null, will add class on hover
animSpeed: 500,// Animation speed in miliseconds
hideTrigger: false,// If true, will hide trigger on select
closeOthers: false,// If true, will close other elements than selected,
startExpanded: false,// If true, target will start expanded
preventClosing: false,// If true, expanded item will not close on trigger
openFirst: false// If true, first item will open at init
});
});
</script>

4. Style the accordion interface via CSS.

.list {
...
}
.list .expandee {
..
}
.list .expandee .trigger {
..
}
.list .expandee .target {
..
}

---

This awesome jQuery plugin is developed by AlexanderBech. For more Advanced Usages, please check the demo page or visit the official website.