Basic Smooth jQuery Accordion Plugin - bbAccordion

bbAccordion is a tiny, straightforward jQuery accordion plugin which enables the visitor to expand / collapse the associated content with a smooth sliding animation based on jQuery .slideUp() and .slideDown() methods.

How to use it:

1. Create an accordion component from plain html structure.

<div class="bbAccordion">
  <div class="accordion-head">
    <h2>Accordion Heading 1</h2>
  </div>
  <div class="accordion-content">
    Accordion Content 1
  </div>
</div>

<div class="bbAccordion">
  <div class="accordion-head">
    <h2>Accordion Heading 2</h2>
  </div>
  <div class="accordion-content">
    Accordion Content 2
  </div>
</div>

<div class="bbAccordion">
  <div class="accordion-head">
    <h2>Accordion Heading 3</h2>
  </div>
  <div class="accordion-content">
    Accordion Content 3
  </div>
</div>

2. Style the accordion component whatever you like.

.bbAccordion .accordion-head {
  padding: .4em .8em;
  cursor: pointer;
  border: 1px solid #24495d;
  border-radius: 5px;
  background: #56d0fe;
  background: -moz-linear-gradient(top, #56d0fe 0, #4994bc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56d0fe), color-stop(100%, #4994bc));
  background: -webkit-linear-gradient(top, #56d0fe 0, #4994bc 100%);
  background: -o-linear-gradient(top, #56d0fe 0, #4994bc 100%);
  background: -ms-linear-gradient(top, #56d0fe 0, #4994bc 100%);
  background: linear-gradient(to bottom, #56d0fe 0, #4994bc 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#56d0fe', endColorstr='#4994bc', GradientType=0)
}

.bbAccordion.active .accordion-head, .bbAccordion.active .accordion-head:hover {
  background: #4083a6;
  background: -moz-linear-gradient(top, #4083a6 0, #4994bc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4083a6), color-stop(100%, #4994bc));
  background: -webkit-linear-gradient(top, #4083a6 0, #4994bc 100%);
  background: -o-linear-gradient(top, #4083a6 0, #4994bc 100%);
  background: -ms-linear-gradient(top, #4083a6 0, #4994bc 100%);
  background: linear-gradient(to bottom, #4083a6 0, #4994bc 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4083a6', endColorstr='#4994bc', GradientType=0)
}

.bbAccordion .accordion-head:hover {
  background: #49CAFC;
  background: -moz-linear-gradient(top, #49cafc 0, #59a9d3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #49cafc), color-stop(100%, #59a9d3));
  background: -webkit-linear-gradient(top, #49cafc 0, #59a9d3 100%);
  background: -o-linear-gradient(top, #49cafc 0, #59a9d3 100%);
  background: -ms-linear-gradient(top, #49cafc 0, #59a9d3 100%);
  background: linear-gradient(to bottom, #49cafc 0, #59a9d3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#49CAFC', endColorstr='#59A9D3', GradientType=0)
}

.bbAccordion .accordion-head h2 {
  margin: 0;
  padding-right: 20px;
  color: #fff;
  font-size: 1.3em;
  line-height: 1.4em;
  background: url(accordion-arrow-right.png) 100% 50% no-repeat
}

.bbAccordion.active .accordion-head h2 { background-image: url(accordion-arrow-down.png) }

.bbAccordion .accordion-head .ui-icons.arrow {
  float: right;
  margin: 2px 0 0 10px;
  background-position: -377px -10px;
  width: 14px;
  height: 14px
}

.bbAccordion.active .accordion-head .ui-icons.arrow { background-position: -350px -10px }

.bbAccordion .accordion-content { padding: 10px }

.bbAccordion .accordion-content.active { display: block }

3. Load jQuery library and the jQuery bbAccordion plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="path/to/jquery.bbAccordion.js"></script> 

4. Initialize the accordion plugin with default options.

$('.bbAccordion').bbAccordion();

5. Possible plugin options.

$('.bbAccordion').bbAccordion({

  // pre-selected content panel
  // true, false, 0, 1, 2, ...
  selectedIdx: false,

  // CSS selectors
  classActive: 'active',
  selectorGroup: 'accordionGroup',
  divHead: '.accordion-head',
  divContent: '.accordion-content',

  // animation speed
  animSpeed: 500

});

Change log:

2016-04-16

• Added support nested accordions

---

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