Smooth Accordion Plugin with jQuery and CSS3 Transforms

Smooth Accordion Plugin with jQuery and CSS3 Transforms
File Size: 3.2 KB
Views Total: 2750
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A stylish accordion jQuery plugin that allows you to expand/collapse stacked content areas with a smooth CSS3 transform based sliding effect by clicking the accordion headers.

How to use it:

1. Place the necessary jQuery javascript library at the end of the document.

<script src=""></script> 

2. Create an accordion structure using dl dt dd elements.

<dl class="accordion">
  <dt>Panel 1</dt>
  <dd>Content 1</dd>
  <dt>Panel 2</dt>
  <dd>Content 2</dd>
  <dt>Panel 3</dt>
  <dd>Content 3</dd>

3. The required CSS styles for the accordion.

.accordion {
 margin: 0 0 30px;
 border-top: 1px solid #DDD;
 border-radius: 4px;

.accordion dt {
 border-bottom: 3px solid #f1f2f3;
 background: #1abc9c;
 color: #FFF;

.accordion dd {
 display: none;
 padding: 20px;
 width: 100%;
 margin-left: 0;
 border-bottom: 1px solid #DDD;
 background: #FFF;

.accordion dt {
 cursor: pointer;
 padding: 8px 15px;
 margin: 0;

.accordion dt:before {
 content: "\25B6";
 padding-right: 5px;
 transition: all .3s linear;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);

.accordion dt:hover:before {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 transform: rotate(90deg);

.accordion dt.accordion-active:before {
 content: "\25B6";
 padding-right: 5px;
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);

.accordion dt.accordion-active:hover {
 cursor: default;

4. Add the following Javascript snippet after jQuery library but before closing body tag.

(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dd:first-of-type').show();
$('.accordion > dt:first-of-type').addClass('accordion-active');
jQuery('.accordion > dt').on('click', function() {
$this = $(this);
$target = $; 

jQuery('.accordion > dt').removeClass('accordion-active');

return false;

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