Lightweight Responsive Accordion Plugin For jQuery - raaccordion

Raaccordion is a lightweight responsive jQuery accordion plugin that allows you to expand/collapse content panels with a smooth sliding effect.

How to use it:

1. Load the jQuery raaccordion plugin after jQuery plugin in the document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type=text/javascript src="raaccordion.js"></script>

2. Create the Html for an accordion.

<div class="accord">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
<div class="clear"></div>
<div class="accord">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
<div class="clear"></div>
<div class="accord">
<div class="title">Title</div>
<div class="content">Content</div>
</div>
<div class="clear"></div>

3. The required CSS styles.

.raccordion {
background: none repeat scroll 0 0 #429C46;
color: #FFFFFF;
margin: 1px 0;
}
.raccordion-title {
cursor: pointer;
display: block;
font-size: 14px;
font-weight: bold;
height: 20px;
padding: 6px 10px;
}
.raccordion-content {
background: steelblue;
color: #FFFFFF;
font-size: 12px;
padding: 10px;
}
.raccordion-arrow {
height: 28px;
width: 29px;
}
.arrow-up {
background: url("img/arrow-down.png") no-repeat scroll 99% 4px / 23px auto rgba(0, 0, 0, 0);
}
.arrow-down {
background: url("img/arrow-up.png") no-repeat scroll 99% 4px / 23px auto rgba(0, 0, 0, 0);
}

4. Call the plugin on the Html elements with CSS class of 'accord'.

<script>
$('.accord').raaccordion(); 
</script>

---

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