Multi-Level jQuery Accordion Plugin - TermAccordion

TermAccordion is a quite simple jQuery plugin for creating multi-level accordion user interface to hide/reveal contents by clicking the headers. With subtle sliding up/down effects.

How to use it:

1. Create the accordion UI elements following the Html structure below:

<div id="nestedAccordion">

<h2>Accordion 1</h2>
<div>
<h3>Accordion 1.1</h3>
<div>
<p>Content 1.1</P>
</div>
<h3>Accordion 1.2</h3>
<div>
<p>Content 1.2</p>
</div>
</div>

...

</div>

2. The sample CSS to style the accordion.

#nestedAccordion {
width: 300px;
}
#nestedAccordion h2, #nestedAccordion h3, #nestedAccordion div, #nestedAccordion p {
/* reset styles for accordion */
margin: 0;
padding: 0;
font-size: 1em;
font-weight: normal;
}
#nestedAccordion div {
display: none;
color: #555;
overflow: hidden;
}
#nestedAccordion h2 {
cursor: pointer;
color: #fff;
font-size: 1.1em;
font-family: Ariel, sans-serif;
padding: 5px;
margin-top: 5px;
background-color: #4B8CFF;
}
#nestedAccordion h3 {
cursor: pointer;
color: #fff;
font-size: 1.1em;
font-family: Ariel, sans-serif;
padding: 5px;
margin-top: 5px;
background-color: #94bbff;
}
#nestedAccordion h4 {
cursor: pointer;
color: #fff;
font-size: 1em;
font-family: Ariel, sans-serif;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
background-color: #c5daff;
}
#nestedAccordion p {
font-family: Ariel, sans-serif;
background-color: #F5F5F5;
padding: 5px 5px 5px 30px;
font-size: 1em;
}

3. Include the latest version of jQuery library at the bottom of your web page.

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

4. The javascript to enable the accordion.

$(document).ready(function() {
var parentDivs = $('#nestedAccordion div');
var childDivs = $('#nestedAccordion h3').siblings('div');
var grandDivs = $('#nestedAccordion h4').siblings('div');

$('#nestedAccordion h2').click(function(){
parentDivs.slideUp();
if($(this).next().is(':hidden')){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
});
$('#nestedAccordion h3').click(function(){
childDivs.slideUp();
if($(this).next().is(':hidden')){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
});
$('#nestedAccordion h4').click(function(){
grandDivs.slideUp();
if($(this).next().is(':hidden')){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
});
});

---

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