jquery.expandingpanels.js

/*-------------------- EXPANDABLE PANELS ----------------------*/
var panelspeed = 500; //panel animate speed in milliseconds
var accordian = false; //set panels to behave like an accordian, with one panel only ever open at once

var panelheight = new Array();
var currentpanel = null;
var highlightopen = true;

//Initialise collapsible panels
function panelinit(openpanels) { // Pass an array of panel names without the cp- for them to be open
  if (openpanels === undefined) openpanels = new Array();
  panelheight = new Array();
  var cp_openpanels = new Array(); // Array with the cp- prefix
  $.each(openpanels, function(index, value) {
    cp_openpanels[index] = 'cp-' + value;
  });
  $("div[id*='cp-']").each(function() {
    panelheight[$(this).attr('id')] = parseInt($(this).find('.expandable-panel-content').css('height'));
    $(this).find('.expandable-panel-content').css('margin-top', -panelheight[$(this)]);
    if ($.inArray($(this).attr('id'), cp_openpanels) >= 0) {
      $(this).find('.expandable-panel-content').css('margin-top', 0);
    }
  });

  $('.expandable-panel-heading').click(function() {
    var obj = $(this).next();
    var objid = $(this).parent().attr('ID');
    currentpanel = objid;
    if (accordian == true) {
      resetpanels();
    }
    if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
      obj.clearQueue();
      obj.stop();
      obj.animate({'margin-top':0}, panelspeed);
      if (highlightopen == true) {
        $('#' + currentpanel + ' .expandable-panel-heading').addClass('header-active');
      }
    } else {
      obj.clearQueue();
      obj.stop();
      obj.prev().find('.icon-close-open').css('background-position', '0px 0px');
      obj.animate({'margin-top':(panelheight[objid]*-1)}, panelspeed);
      if (highlightopen == true) {
        $('#' + currentpanel + ' .expandable-panel-heading').removeClass('header-active');
      }
    }
  });
}

function resetpanels() {
    $("div[id*='cp-']").each(function(i) {
        if (currentpanel != $(this)) {

            $(this).find('.icon-close-open').css('background-position', '0px 0px');
            $(this).find('.expandable-panel-content').animate({'margin-top':-panelheight[$(this).attr('id')]}, panelspeed);
            if (highlightopen == true) {
                $(this).find('.expandable-panel-heading').removeClass('header-active');
            }
        }
    });
}