Minimal Accordion/Sliding Box Plugin - Accordion.js
File Size: | 8.81 KB |
---|---|
Views Total: | 1623 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal accordion engine written in jQuery that enables the users to collapse and expand sectioned content just like a sliding box.
The plugin simply provides a basic accordion logic to your sectioned content. Feel free to apply custom styles & animations to the accordion panels using your own CSS.
How to use it:
1. Add accordion headers (controls) and panels to the accordion interface as follows:
<div id="my-accordion" class="accordion"> <div class="group"> <a class="control" href="#">Accordion #1 <span class="expand">▼</span><span class="collapse">▲</span></a> <div class="box"> <div class="inner"> Accordion 1 Content </div> </div> </div> <div class="group"> <a class="control" href="#">Accordion #2 <span class="expand">▼</span><span class="collapse">▲</span></a> <div class="box"> <div class="inner"> Accordion 2 Content </div> </div> </div> <div class="group"> <a class="control" href="#">Accordion #3 <span class="expand">▼</span><span class="collapse">▲</span></a> <div class="box"> <div class="inner"> Accordion 3 Content </div> </div> </div> </div>
2. Add jQuery JavaScript library and the Accordion.js script to the webpage.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/accordion.js"></script>
3. Initailize the accordion plugin and done.
$(function() { $('#my-accordion').accordion(); });
4. Enable the smooth slide up/down animations. Default: false.
$(function() { $('#my-accordion').accordion({ animation: true, speed: 500 // default: 200 }); });
5. Determine whether to allow multiple accordion panels to be expanded at a time. Default: false.
$(function() { $('#my-accordion').accordion({ multiple: true }); });
6. Customize the appearance of the accordion with CSS.
.accordion { border-bottom: 1px solid #9a9a9a; } .accordion .control { position: relative; text-decoration: none; display: block; font-weight: bold; font-size: 16px; line-height: 40px; padding: 0.4em 1em; color: #333333; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); filter: progid: DXImageTransform.Microsoft.gradient(enabled=false); } .accordion .control .collapse { position: absolute; right: 10px; top: 7px; } .accordion .control .expand { position: absolute; right: 10px; top: 7px; } .accordion .control i { font-size: 1.2em; color: #009900; } .accordion .control:hover { text-decoration: none; } .accordion .group { border: 1px solid #9a9a9a; border-bottom: none; } .accordion .group .box { border-top: 1px solid #9a9a9a; padding: 0; margin: 0; } .accordion .group .box .inner { padding: 1em; } .accordion .group.open .control { background-color: #e4e4e4; background-image: none; }
This awesome jQuery plugin is developed by mlmedia. For more Advanced Usages, please check the demo page or visit the official website.