Customizing the accordion effect

This demo shows how you can add custom effects to tabs. Here you can see a slight background color change when the sliding effect occurs:

First pane

Lorem ipsum dolor

Fusce semper, nisi nec pellentesque sollicitudin.

Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra ornare. Nulla id massa nec erat laoreet elementum. Vivamus tristique auctor odio. Integer mi neque.

Second pane

Vestibulum ante ipsum

Cras diam. Donec dolor lacus, vestibulum at, varius in, mollis id, dolor. Aliquam erat volutpat. Praesent pretium tristique est. Maecenas nunc lorem, blandit nec, accumsan nec, facilisis quis, pede. Aliquam erat volutpat. Donec sit amet urna quis nisi elementum fermentum.

Third pane

Curabitur vel dolor

Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna, non vulputate libero justo nec sem. Nullam arcu. Donec pellentesque vestibulum urna. In mauris odio, fringilla commodo, commodo ac, dignissim ac, augue.

standalone demo

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

JavaScript

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

JavaScript