Simple Stylish Accordion Widget with jQuery and CSS

A lightweight and stylish jQuery accordion widget that allows you to expand or collapse sections of content with a subtle sliding effect by clicking headers.

How to use it:

1. Create content panels for the accordion widget using plain Html structure like this:

<div class="accordion">
  <div class="item">
    <div class="heading">This is the first title</div>
    <div class="content">This is the first content</div>
  </div>
  <div class="item">
    <div class="heading">This is the second title</div>
    <div class="content">This is the second content</div>
  </div>
  <div class="item">
    <div class="heading">This is the third title</div>
    <div class="content">This is the third content</div>
  </div>
</div>

2. The required CSS to style the accordion widget. You can change the width, color, border to fit your design needs.

.accordion {
  width: 500px;
  border-radius: 5px;
  overflow: hidden;
  margin: auto;
}

.accordion .item .heading {
  height: 50px;
  line-height: 50px;
  font-size: 17px;
  cursor: pointer;
  color: #fff;
  padding-left: 15px;
  background: #ee6363 url('arrow.png') no-repeat;
  background-position: right 20px top -95px;
  border-bottom: 1px solid #ec8484;
  box-sizing: border-box;
}

.accordion .item.open .heading,
.accordion .item:last-child .heading { border: 0; }

.accordion .item.open .heading { background-position: right 20px top -5px; }

.accordion .item .content {
  display: none;
  padding: 15px;
  background: #fff;
  font-size: 14px;
}

3. Include the latest version of jQuery library at the bottom of the document.

<link href="//www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet">

4. The Javascript to active the accordion widget.

$('.accordion .item .heading').click(function() {
		
	var a = $(this).closest('.item');
	var b = $(a).hasClass('open');
	var c = $(a).closest('.accordion').find('.open');
		
	if(b != true) {
		$(c).find('.content').slideUp(200);
		$(c).removeClass('open');
	}

	$(a).toggleClass('open');
	$(a).find('.content').slideToggle(200);

});

---

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