collapsible.js
4.24 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
(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', '> li > .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 *****/
// Add click handler to only direct collapsible header children
$this.on('click.collapse', '> li > .collapsible-header', function(e) {
var $header = $(this),
element = $(e.target);
if (isChildrenOfPanelHeader(element)) {
element = getPanelHeader(element);
}
element.toggleClass('active');
if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
accordionOpen(element);
} else { // Handle Expandables
expandableOpen(element);
if ($header.hasClass('active')) {
expandableOpen($header);
}
}
});
// Open first active
var $panel_headers = $this.find('> li > .collapsible-header');
if (options.accordion || collapsible_type === "accordion" || collapsible_type === undefined) { // Handle Accordion
accordionOpen($panel_headers.filter('.active').first());
}
else { // Handle Expandables
$panel_headers.filter('.active').each(function() {
expandableOpen($(this));
});
}
});
};
$(document).ready(function(){
$('.collapsible').collapsible();
});
}( jQuery ));