Submit your widget

Customizing the Accordion effect

Created 6 years ago   Views 28838   downloads 5188    Author
Customizing the Accordion effect
View DemoDownload 51.2 KB
Share |

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;

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;


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});