2 * jQuery UI Accordion 1.7.1
4 * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
5 * Dual licensed under the MIT (MIT-LICENSE.txt)
6 * and GPL (GPL-LICENSE.txt) licenses.
8 * http://docs.jquery.com/UI/Accordion
15 $.widget("ui.accordion", {
19 var o = this.options, self = this;
22 // if the user set the alwaysOpen option on init
23 // then we need to set the collapsible option
24 // if they set both on init, collapsible will take priority
25 if (o.collapsible == $.ui.accordion.defaults.collapsible &&
26 o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
27 o.collapsible = !o.alwaysOpen;
31 var current = this.element.find("a").filter(o.navigationFilter);
32 if ( current.length ) {
33 if ( current.filter(o.header).length ) {
34 this.active = current;
36 this.active = current.parent().parent().prev();
37 current.addClass("ui-accordion-content-active");
42 this.element.addClass("ui-accordion ui-widget ui-helper-reset");
44 // in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
45 if (this.element[0].nodeName == "UL") {
46 this.element.children("li").addClass("ui-accordion-li-fix");
49 this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
50 .bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
51 .bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
52 .bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
53 .bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });
57 .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
59 this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
60 this.active.next().addClass('ui-accordion-content-active');
62 //Append icon elements
63 $("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
64 this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
66 // IE7-/Win - Extra vertical space in lists fixed
68 this.element.find('a').css('zoom', '1');
74 this.element.attr('role','tablist');
78 .bind('keydown', function(event) { return self._keydown(event); })
80 .attr('role','tabpanel');
83 .not(this.active || "")
84 .attr('aria-expanded','false')
85 .attr("tabIndex", "-1")
89 // make sure at least one header is in the tab order
90 if (!this.active.length) {
91 this.headers.eq(0).attr('tabIndex','0');
94 .attr('aria-expanded','true')
95 .attr('tabIndex', '0');
98 // only need links in taborder for Safari
99 if (!$.browser.safari)
100 this.headers.find('a').attr('tabIndex','-1');
103 this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); });
108 destroy: function() {
109 var o = this.options;
112 .removeClass("ui-accordion ui-widget ui-helper-reset")
114 .unbind('.accordion')
115 .removeData('accordion');
118 .unbind(".accordion")
119 .removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
120 .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
122 this.headers.find("a").removeAttr("tabindex");
123 this.headers.children(".ui-icon").remove();
124 var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
125 if (o.autoHeight || o.fillHeight) {
126 contents.css("height", "");
130 _setData: function(key, value) {
131 if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
132 $.widget.prototype._setData.apply(this, arguments);
135 _keydown: function(event) {
137 var o = this.options, keyCode = $.ui.keyCode;
139 if (o.disabled || event.altKey || event.ctrlKey)
142 var length = this.headers.length;
143 var currentIndex = this.headers.index(event.target);
146 switch(event.keyCode) {
149 toFocus = this.headers[(currentIndex + 1) % length];
153 toFocus = this.headers[(currentIndex - 1 + length) % length];
157 return this._clickHandler({ target: event.target }, event.target);
161 $(event.target).attr('tabIndex','-1');
162 $(toFocus).attr('tabIndex','0');
173 var o = this.options, maxHeight;
177 if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); }
178 maxHeight = this.element.parent().height();
179 if($.browser.msie) { this.element.parent().css('overflow', defOverflow); }
181 this.headers.each(function() {
182 maxHeight -= $(this).outerHeight();
186 this.headers.next().each(function() {
187 maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
188 }).height(Math.max(0, maxHeight - maxPadding))
189 .css('overflow', 'auto');
191 } else if ( o.autoHeight ) {
193 this.headers.next().each(function() {
194 maxHeight = Math.max(maxHeight, $(this).outerHeight());
195 }).height(maxHeight);
200 activate: function(index) {
201 // call clickHandler with custom event
202 var active = this._findActive(index)[0];
203 this._clickHandler({ target: active }, active);
206 _findActive: function(selector) {
208 ? typeof selector == "number"
209 ? this.headers.filter(":eq(" + selector + ")")
210 : this.headers.not(this.headers.not(selector))
213 : this.headers.filter(":eq(0)");
216 _clickHandler: function(event, target) {
218 var o = this.options;
219 if (o.disabled) return false;
221 // called only when using activate(false) to close all parts programmatically
222 if (!event.target && o.collapsible) {
223 this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
224 .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
225 this.active.next().addClass('ui-accordion-content-active');
226 var toHide = this.active.next(),
234 toShow = (this.active = $([]));
235 this._toggle(toShow, toHide, data);
239 // get the click target
240 var clicked = $(event.currentTarget || target);
241 var clickedIsActive = clicked[0] == this.active[0];
243 // if animations are still active, or the active header is the target, ignore click
244 if (this.running || (!o.collapsible && clickedIsActive)) {
249 this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
250 .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
251 this.active.next().addClass('ui-accordion-content-active');
252 if (!clickedIsActive) {
253 clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
254 .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
255 clicked.next().addClass('ui-accordion-content-active');
258 // find elements to show and hide
259 var toShow = clicked.next(),
260 toHide = this.active.next(),
263 newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
264 oldHeader: this.active,
265 newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
266 oldContent: toHide.find('> *')
268 down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
270 this.active = clickedIsActive ? $([]) : clicked;
271 this._toggle(toShow, toHide, data, clickedIsActive, down);
277 _toggle: function(toShow, toHide, data, clickedIsActive, down) {
279 var o = this.options, self = this;
281 this.toShow = toShow;
282 this.toHide = toHide;
285 var complete = function() { if(!self) return; return self._completed.apply(self, arguments); };
287 // trigger changestart event
288 this._trigger("changestart", null, this.data);
290 // count elements to animate
291 this.running = toHide.size() === 0 ? toShow.size() : toHide.size();
295 var animOptions = {};
297 if ( o.collapsible && clickedIsActive ) {
303 autoHeight: o.autoHeight || o.fillSpace
311 autoHeight: o.autoHeight || o.fillSpace
316 o.proxied = o.animated;
319 if (!o.proxiedDuration) {
320 o.proxiedDuration = o.duration;
323 o.animated = $.isFunction(o.proxied) ?
324 o.proxied(animOptions) : o.proxied;
326 o.duration = $.isFunction(o.proxiedDuration) ?
327 o.proxiedDuration(animOptions) : o.proxiedDuration;
329 var animations = $.ui.accordion.animations,
330 duration = o.duration,
333 if (!animations[easing]) {
334 animations[easing] = function(options) {
335 this.slide(options, {
337 duration: duration || 700
342 animations[easing](animOptions);
346 if (o.collapsible && clickedIsActive) {
357 toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur();
358 toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus();
362 _completed: function(cancel) {
364 var o = this.options;
366 this.running = cancel ? 0 : --this.running;
367 if (this.running) return;
370 this.toShow.add(this.toHide).css({
376 this._trigger('change', null, this.data);
382 $.extend($.ui.accordion, {
386 alwaysOpen: true, //deprecated, use collapsible
393 header: "> li > :first-child,> :not(li):even",
395 header: "ui-icon-triangle-1-e",
396 headerSelected: "ui-icon-triangle-1-s"
399 navigationFilter: function() {
400 return this.href.toLowerCase() == location.href.toLowerCase();
404 slide: function(options, additions) {
408 }, options, additions);
409 if ( !options.toHide.size() ) {
410 options.toShow.animate({height: "show"}, options);
413 if ( !options.toShow.size() ) {
414 options.toHide.animate({height: "hide"}, options);
417 var overflow = options.toShow.css('overflow'),
421 fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
423 // fix width before calculating height of hidden element
424 var s = options.toShow;
425 originalWidth = s[0].style.width;
426 s.width( parseInt(s.parent().width(),10) - parseInt(s.css("paddingLeft"),10) - parseInt(s.css("paddingRight"),10) - (parseInt(s.css("borderLeftWidth"),10) || 0) - (parseInt(s.css("borderRightWidth"),10) || 0) );
428 $.each(fxAttrs, function(i, prop) {
429 hideProps[prop] = 'hide';
431 var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
434 unit: parts[2] || 'px'
437 options.toShow.css({ height: 0, overflow: 'hidden' }).show();
438 options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
439 step: function(now, settings) {
440 // only calculate the percent when animating height
441 // IE gets very inconsistent results when animating elements
442 // with small values, which is common for padding
443 if (settings.prop == 'height') {
444 percentDone = (settings.now - settings.start) / (settings.end - settings.start);
447 options.toShow[0].style[settings.prop] =
448 (percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
450 duration: options.duration,
451 easing: options.easing,
452 complete: function() {
453 if ( !options.autoHeight ) {
454 options.toShow.css("height", "");
456 options.toShow.css("width", originalWidth);
457 options.toShow.css({overflow: overflow});
462 bounceslide: function(options) {
463 this.slide(options, {
464 easing: options.down ? "easeOutBounce" : "swing",
465 duration: options.down ? 1000 : 200
468 easeslide: function(options) {
469 this.slide(options, {