Simple Responsive jQuery Accordion Plugin - SMK Accordion
File Size: | 25.9 KB |
---|---|
Views Total: | 53731 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
SMK Accordion is a jQuery plugin aims to provide a quick way to create a responsive and clean accordion interface. When clicking the header of a section, the section will be expanded and the others will be collapsed to present current section's content in a limited amount of space.
Basic Usage:
1. Include the jQuery SMK Accordion's stylesheet file in the head section of your page.
<link rel="stylesheet" href="css/smk-accordion.css" />
2. Create the html for an accordion interface.
<div class="accordion-demo"> <!-- Section 1 --> <div class="accordion_in"> <div class="acc_head">Section 1</div> <div class="acc_content"> <p>Your Content Goes Here.</p> </div> </div> <!-- Section 2 --> <div class="accordion_in"> <div class="acc_head">Section 2</div> <div class="acc_content"> <p>Your Content Goes Here.</p> </div> </div> <!-- Section 3 --> <div class="accordion_in"> <div class="acc_head">Section 3</div> <div class="acc_content"> <p>Your Content Goes Here.</p> </div> </div> ... </div>
3. Load the latest jQuery javascript library and jQuery SMK Accordion plugin at the end of your document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/smk-accordion.js"></script>
4. Call the plugin with options.
$(".accordion-demo").accordionjs({ // The section open on first init. activeIndex : 1, // Closeable section. closeAble: false, // Close other sections. closeOther : true, // the speed of slide animation. slideSpeed: 200 });
Change log:
2017-10-04
- JS & CSS update
2017-09-30
- v2.1: Major release and rebrand
2017-07-11
- v1.4
2014-09-04
- Added support for HTML5 data attributes
v1.2 (2014-07-22)
- update.
v1.1 (2014-03-07)
- update.
This awesome jQuery plugin is developed by awps. For more Advanced Usages, please check the demo page or visit the official website.