Simple Effective jQuery Accordion Plugin - expandAccordion

A simple, effective and responsive jQuery accordion plugin for expanding/collapsing content panels with smooth slide animations based on CSS3 transition.

How to use it:

1. Include the jquery.expandAccordion.css for basic accordion styles/animations.

<link rel="stylesheet" href="css/jquery.expandAccordion.css">

2. Create a set of Html elements for the accordion.

<div class="expand_accordion" id="expand_accordion">
  <div class="main">
    <div class="item">
      <div class="item_header">
        <div class="inner"> <span>Header 1</span> </div>
      </div>
      <div class="item_content">
        <div class="inner"> Content 1 </div>
      </div>
    </div>
    <div class="item">
      <div class="item_header">
        <div class="inner"> <span>Header2</span> </div>
      </div>
      <div class="item_content">
        <div class="inner"> Content 2 </div>
      </div>
    </div>
    <div class="item">
      <div class="item_header">
        <div class="inner"> <span>Header 3</span> </div>
      </div>
      <div class="item_content">
        <div class="inner"> Content 3 </div>
      </div>
    </div>
  </div>
</div>

3. Include the latest jQuery library and the jQuery expandAccordion plugin at the bottom of the document so the pages load faster.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/jquery.expandAccordion.js"></script>

4. Call the plugin on the parent container to make the set of elements act like a vertical accordion.

$("#expand_accordion").expandAccordion({
  // OPTIONS
});

5. Add the custom CSS to style the accordion whatever you like.

.header,
.footer { background: #F7F7F7; }

.header > .inner > h1 {
  display: block;
  position: absolute;
  bottom: 22px;
  left: 22px;
  line-height: 44px;
  font-size: 44px;
  font-weight: 300;
}

.footer > .inner {
  display: block;
  width: 100%;
  height: 100%;
}

.footer > .inner > a {
  display: inline-block;
  position: absolute;
  text-decoration: none;
  color: #1D62F0;
  bottom: 22px;
  left: 22px;
}

.main > .item { background: #FFFFFF; }

.main > .item > .item_header {
  background: #FFFFFF;
  border-top: 1px solid #D7D7D7;
  -webkit-transition: background 0.5s ease 0;
  -moz-transition: background 0.5s ease 0;
  transition: background 0.5s ease 0;
}

.main > .item:last-child > .item_header { border-bottom: 1px solid #D7D7D7; }

.main > .item.opened > .item_header {
  background: #D7D7D7;
  -webkit-transition: background 0.5s ease 0;
  -moz-transition: background 0.5s ease 0;
  transition: background 0.5s ease 0;
}

.main > .item > .item_header > .inner > span {
  margin-left: 22px;
  font-size: 18px;
  line-height: 44px;
}

.item_content { background: #FFFFFF; }

.item_content > .inner { padding: 10px 22px; }

6. Available options.

accordionHeight: 548,
itemHeaderHeight: 44,
headerHeight: undefined,
footerHeight: undefined

7. Events.

// fired when an items is opened
$('#item_event').on('itemOpened', function() {
  // Do something
});

// fired when an items is closed
$('#item_event').on('itemClosed', function() {
  // Do something
});

---

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