Template:ETH Zurich/expandable headers.js

/* Lovingly stolen from http://www.webdevdoor.com/jquery/expandable-collapsible-panels-jquery/ */ (function($) {

   $(document).ready(function () {
       /*-------------------- EXPANDABLE PANELS ----------------------*/
       var panelspeed = 500; //panel animate speed in milliseconds
       var totalpanels = 500; //total number of collapsible panels
       var defaultopenpanel = 0; //leave 0 for no panel open
       var accordian = true; //set panels to behave like an accordian, with one panel only ever open at once      

       var panelheight = new Array();
       var currentpanel = defaultopenpanel;
       var iconheight = parseInt($('.icon-close-open').css('height'));
       var highlightopen = true;

       //Initialise collapsible panels
       function panelinit() {
               for (var i=1; i<=totalpanels; i++) {
                   panelheight[i] = parseInt($('#cp-'+i).find('.expandable-panel-content').css('height'));
                   $('#cp-'+i).find('.expandable-panel-content').css('margin-top', -panelheight[i]);
                   if (defaultopenpanel == i) {
                       $('#cp-'+i).find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
                       $('#cp-'+i).find('.expandable-panel-content').css('margin-top', 0);
                   }
               }
       }

       $('.expandable-panel-heading').click(function() {
           var obj = $(this).next();
           var objid = parseInt($(this).parent().attr('ID').substr(3,2));
           currentpanel = objid;
           if (accordian == true) {
               resetpanels();
           }

           if (parseInt(obj.css('margin-top')) <= (panelheight[objid]*-1)) {
               obj.clearQueue();
               obj.stop();
               obj.prev().find('.icon-close-open').css('background-position', '0px -'+iconheight+'px');
               obj.animate({'margin-top':0}, panelspeed);
               if (highlightopen == true) {
                   $('#cp-'+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) {
                   $('#cp-'+currentpanel + ' .expandable-panel-heading').removeClass('header-active');
               }
           }
       });

       function resetpanels() {
           for (var i=1; i<=totalpanels; i++) {
               if (currentpanel != i) {
                   $('#cp-'+i).find('.icon-close-open').css('background-position', '0px 0px');
                   $('#cp-'+i).find('.expandable-panel-content').animate({'margin-top':-panelheight[i]}, panelspeed);
                   if (highlightopen == true) {
                       $('#cp-'+i + ' .expandable-panel-heading').removeClass('header-active');
                   }
               }
           }
       }
       
      //Uncomment these lines if the expandable panels are not a fixed width and need to resize
      /* $( window ).resize(function() {
         panelinit();
       });*/

       $(window).load(function() {
           panelinit();
       }); //END LOAD
   }); //END READY

})(jQuery);