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