Simple Responsive jQuery Accordion Plugin - SMK Accordion

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.