Customizing the Accordion effect

View
Download

Adding a custom effect

If you want to make custom effects, you'll use the $.tools.tabs.addEffect() method. The first argument is the effect name and the second argument is the function that performs the required functionality when a tab (or accordion header) is clicked. You can use this method to modify existing effects or add new ones. Here we modify the built-in "slide" effect:

// add new effect to the tabs

$.tools.tabs.addEffect("slide", function(i, done) {

// 1. upon hiding, the active pane has a ruby background color

this.getPanes().slideUp().css({backgroundColor: "#b8128f"});

// 2. after a pane is revealed, its background is set to its original color (transparent)

this.getPanes().eq(i).slideDown(function()  {

$(this).css({backgroundColor: 'transparent'});

// the supplied callback must be called after the effect has finished its job

done.call();

});

});

Your effect function is given two arguments. The first argument,i
, refers to the tab index number and the second argument,done
, is a function that you must call after your effect finishes its job. This can be accomplished by calling
done.call();

JavaScript coding

After we have modified our effect, the accordion installation is identical to our basic installation:

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});