How to extend the jQuery accordion plugin
javascript, jquery, jquery-plugins, jquery-ui, jquery-ui-accordion
Solution
$.extend($.ui.multiAccordion, {
// private helper method that used to show tabs
_showTab: function($this) {
var $span = $this.children('span.ui-icon');
var $div = $this.next();
var options = this.options;
$this.removeClass('ui-state-default ui-corner-all').addClass('ui-state-active ui-corner-top');
$span.removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
// MODIIFICATION
bindThis = this;
var ui = {
tab: $this,
content: $this.next('div')
}
$div.slideDown('fast', function(){
$div.addClass(options._classes.divActive);
// MODIFICATION
bindThis._trigger('tabShownComplete');
});
this._trigger('tabShown', null, ui);
},
// private helper method that used to show tabs
_hideTab: function($this) {
var $span = $this.children('span.ui-icon');
var $div = $this.next();
var options = this.options;
$this.removeClass('ui-state-active ui-corner-top').addClass('ui-state-default ui-corner-all');
$span.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
// MODIIFICATION
bindThis = this;
var ui = {
tab: $this,
content: $this.next('div')
}
$div.slideUp('fast', function(){
$div.removeClass(options._classes.divActive);
// MODIFICATION
bindThis._trigger('tabHiddenComplete', null, ui);
});
this._trigger('tabHidden', null, ui);
}
});
- https://gist.github.com/4342758
Problem
How to extend a jQuery plugin? currently I am using multiopen accordion plugin. I need to add new feature like once the expand/collapse is finished I need to callback a function as like change event in jquery ui accordion plugin. How to add this feature in this plugin.