jQuery Expand Accordion Plugin Demo

How to use

<div class="expand_accordion" id="expand_accordion">
      <div class="header">
        <div class="inner"></div>
      </div><!-- /.header -->

      <div class="main">
        <div class="item">
          <div class="item_header">
            <div class="inner">
              <span>How to use</span>
            </div>
          </div><!-- /.item_header -->
          <div class="item_content">
            <div class="inner"></div>
          </div><!-- /.item_content -->
        </div><!-- /.item -->
        
        <div class="item">
          <div class="item_header">
            <div class="inner">
              <span>How to use</span>
            </div>
          </div><!-- /.item_header -->
          <div class="item_content">
            <div class="inner"></div>
          </div><!-- /.item_content -->
        </div><!-- /.item -->

        <div class="footer">
        <div class="inner"></div>
      </div><!-- /.footer -->
    </div>
      
</div>


$("#expand_accordion").expandAccordion();

Options

$(function() {
  $("#expand_accordion").expandAccordion({
    accordionHeight: 400,
    itemHeaderHeight: 44,
    headerHeight: 88,
    footerHeight: 180
  });
});

var defaults = {
  accordionHeight: 548,
  itemHeaderHeight: 44,
  headerHeight: undefined,
  footerHeight: undefined
};

Event

$('#item_event').on('itemOpened', function() {
  alert('Item opened!!');
});

$('#item_event').on('itemClosed', function() {
  alert('Item closed!!');
});