JAVASCRIPT   54

collapsible js

Guest on 24th June 2022 03:22:00 PM

  1. (function ($) {
  2.   $.fn.collapsible = function(options) {
  3.     var defaults = {
  4.         accordion: undefined
  5.     };
  6.  
  7.     options = $.extend(defaults, options);
  8.  
  9.  
  10.     return this.each(function() {
  11.  
  12.       var $this = $(this);
  13.  
  14.       var $panel_headers = $(this).find('> li > .collapsible-header');
  15.  
  16.       var collapsible_type = $this.data("collapsible");
  17.  
  18.       // Turn off any existing event handlers
  19.        $this.off('click.collapse', '> li > .collapsible-header');
  20.        $panel_headers.off('click.collapse');
  21.  
  22.  
  23.        /****************
  24.        Helper Functions
  25.        ****************/
  26.  
  27.       // Accordion Open
  28.       function accordionOpen(object) {
  29.         $panel_headers = $this.find('> li > .collapsible-header');
  30.         if (object.hasClass('active')) {
  31.             object.parent().addClass('active');
  32.         }
  33.         else {
  34.             object.parent().removeClass('active');
  35.         }
  36.         if (object.parent().hasClass('active')){
  37.           object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
  38.         }
  39.         else{
  40.           object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
  41.         }
  42.  
  43.         $panel_headers.not(object).removeClass('active').parent().removeClass('active');
  44.         $panel_headers.not(object).parent().children('.collapsible-body').stop(true,false).slideUp(
  45.           {
  46.             duration: 350,
  47.             easing: "easeOutQuart",
  48.             queue: false,
  49.             complete:
  50.               function() {
  51.                 $(this).css('height', '');
  52.               }
  53.           });
  54.       }
  55.  
  56.       // Expandable Open
  57.       function expandableOpen(object) {
  58.         if (object.hasClass('active')) {
  59.             object.parent().addClass('active');
  60.         }
  61.         else {
  62.             object.parent().removeClass('active');
  63.         }
  64.         if (object.parent().hasClass('active')){
  65.           object.siblings('.collapsible-body').stop(true,false).slideDown({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
  66.         }
  67.         else{
  68.           object.siblings('.collapsible-body').stop(true,false).slideUp({ duration: 350, easing: "easeOutQuart", queue: false, complete: function() {$(this).css('height', '');}});
  69.         }
  70.       }
  71.  
  72.       /**
  73.        * Check if object is children of panel header
  74.        * @param  {Object}  object Jquery object
  75.        * @return {Boolean} true if it is children
  76.        */
  77.       function isChildrenOfPanelHeader(object) {
  78.  
  79.         var panelHeader = getPanelHeader(object);
  80.  
  81.         return panelHeader.length > 0;
  82.       }
  83.  
  84.       /**
  85.        * Get panel header from a children element
  86.        * @param  {Object} object Jquery object
  87.        * @return {Object} panel header object
  88.        */
  89.       function getPanelHeader(object) {
  90.  
  91.         return object.closest('li > .collapsible-header');
  92.       }
  93.  
  94.       /*****  End Helper Functions  *****/
  95.  
  96.  
  97.  
  98.       // Add click handler to only direct collapsible header children
  99.       $this.on('click.collapse', '> li > .collapsible-header', function(e) {
  100.         var $header = $(this),
  101.             element = $(e.target);
  102.  
  103.         if (isChildrenOfPanelHeader(element)) {
  104.           element = getPanelHeader(element);
  105.         }
  106.  
  107.         element.toggleClass('active');
  108.  
  109.         if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
  110.           accordionOpen(element);
  111.         } else { // Handle Expandables
  112.           expandableOpen(element);
  113.  
  114.           if ($header.hasClass('active')) {
  115.             expandableOpen($header);
  116.           }
  117.         }
  118.       });
  119.  
  120.       // Open first active
  121.       var $panel_headers = $this.find('> li > .collapsible-header');
  122.       if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
  123.         accordionOpen($panel_headers.filter('.active').first());
  124.       }
  125.       else { // Handle Expandables
  126.         $panel_headers.filter('.active').each(function() {
  127.           expandableOpen($(this));
  128.         });
  129.       }
  130.  
  131.     });
  132.   };
  133.  
  134.   $(document).ready(function(){
  135.     $('.collapsible').collapsible();
  136.   });
  137. }( jQuery ));

Raw Paste


Login or Register to edit or fork this paste. It's free.