Responsive jQuery Accordion Plugin with Smooth Sliding Effect
File Size: | 18.5 KB |
---|---|
Views Total: | 11378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.