Responsive jQuery Accordion Plugin with Smooth Sliding Effect

A simple clean, responsive and cross-platform jQuery accordion plugin that allows to expand hidden html contents with smooth sliding effects.

How to use it:

1. Include the latest jQuery javascript library and responsive-accordion.min.js at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="assets/js/responsive-accordion.min.js" type="text/javascript"></script> 

2. Include font-awesome.css in the head section of the document.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" media="all" />

3. Markup html structure.

<div class="container">
<ul id="example-1" class="accordion">
<li>
<div class="acc-head">Heading 1 <i class="fa fa-plus-circle plus fa-fw"></i><i class="fa fa-minus-circle minus fa-fw"></i></div>
<div class="acc-panel">
<p> Content 1 </p>
</div>
</li>
<li>
<div class="acc-head">Heading 2 <i class="fa fa-plus-circle plus fa-fw"></i><i class="fa fa-minus-circle minus fa-fw"></i></div>
<div class="acc-panel">
<p> Content 2 </p>
</div>
</li>
<li>
<div class="acc-head">Heading 3 <i class="fa fa-plus-circle plus fa-fw"></i><i class="fa fa-minus-circle minus fa-fw"></i></div>
<div class="acc-panel">
<p> Content 2 </p>
</div>
</li>
</ul>
</div>

4. The required CSS to style the accordion.

.accordion {
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li {
margin: 0;
padding: 0;
}
.accordion li .acc-head {
cursor: pointer;
}
.accordion li .acc-head.active {
font-weight: bold;
}

#example-1.accordion li .acc-head {
margin: 20px 0;
border: 1px solid #DDD;
padding: 10px 30px 10px 10px;
background: #FFF;
color: #0b8593;
line-height: normal;
position: relative;
}
#example-1.accordion li .acc-head i {
position: absolute;
top: 12px;
right: 10px;
}
#example-1.accordion li .acc-panel {
margin-bottom: -20px;
border: 1px solid #DDD;
padding: 20px;
background: #FFF;
position: relative;
top: -21px;
}

Change log:

v1.3 (2014-07-16)

• update

v1.2 (2014-04-10)

• update

v1.1.1 (2014-02-13)

• update

v1.1 (2014-02-14)

• update

---

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