Smooth Accordion Plugin with jQuery and CSS3 Transforms

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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
</dl>

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.

<script>
(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 = $this.next(); 
if(!$this.hasClass('accordion-active')){
$this.parent().children('dd').slideUp();

jQuery('.accordion > dt').removeClass('accordion-active');
$this.addClass('accordion-active');
$target.addClass('active').slideDown();
 
}

return false;
});
 
})(jQuery);
</script>

---

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