Simple and Fast Accordion Plugin with jQuery

A minimalist jQuery plugin used to create a simple, fast, stylish, smooth accordion widget with a few lines of JavaScript. This project is licensed under a Creative Commons Attribution-ShareAlike 3.0.

Features:

• Supper lightweight. Less than 1kb.
• Smooth slide animations.
• Custom the active panel when page loads.
• Close the active panels when opening a new one.

How to use it:

1. Load the latest version of jQuery JavaScript library in your web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

2. Create an accordion widget using Html definition lists.

<dl class="accordion">

  <dt>Headling 1</dt>
  <dd class="active">
    <p>Content 1</p>
  </dd>
  
  <dt>Headling 2</dt>
  <dd>
    <p>Content 2</p>
  </dd>
  
  <dt>Headling 3</dt>
  <dd>
    <p>Content 3</p>
  </dd>
  
  <dt>Headling 4</dt>
  <dd>
    <p>Content 4</p>
  </dd>
  
  <dt>Headling 5</dt>
  <dd>
    <p>Content 5</p>
  </dd>
  
  ...
  
</dl>

3. Style the accordion widget in the CSS. Override the following CSS snippets to create your own styles.

dl.accordion {
  background: #444;
  width: 100%;
  float: left;
}

dl.accordion dt {
  background: #333;
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid #222;
  border-top: 1px solid #444;
  color: #CCC;
  cursor: pointer;
}

dl.accordion dd {
  display: none;
  background: #444;
  color: #EFEFEF;
  margin: 0;
}

dl.accordion dd p {
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
}

dl.accordion .active { display: block; }

4. The core JavaScript for the accordion widget.

(function($) {
  $.fn.SimpleAccordion = function () {
    var accordion = $(this);
    accordion.hide().fadeIn(); 
    accordion.find(".active").show();
    accordion.find("dt").on("click", function () {
      var current = $(this).next("dd"); 
      if (current.is(":hidden")) { 
        current.slideDown().siblings("dd").slideUp(); 
      }
    });
  };
})(jQuery);

5. Apply the function to the Html definition list.

$(".accordion").SimpleAccordion(); 

---

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