Simple and Fast Accordion Plugin with jQuery

File Size: 3.44 KB
Views Total: 2106
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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=""></script>

2. Create an accordion widget using Html definition lists.

<dl class="accordion">

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

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.find("dt").on("click", function () {
      var current = $(this).next("dd"); 
      if (":hidden")) { 

5. Apply the function to the Html definition list.


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