Alligatorsneeze

jQuery is neat, and so is the jQuery tabs plugin. This is a method I used to add "continue" and "previous" buttons to some jQuery tabs, essentially giving it a "wizard-like" look and feel. While I am also using a version of the JS Tools tabs module for Drupal, this should hopefully work for the stand-alone plugin, too.

Despite the tabs being assigned anchor IDs, simply trying to skip to the next one only seems to work in Firefox. Let's break this down and say I have a page with 3 tabs. The tabs are named #section-1, #section-2, and #section-3.

In #section-1, I want a "Continue" button going to #section-2. This is the code I add directly to my tabs page at the bottom of #section-1.

I also added some similar links on #section-2 for a previous AND continue button, like so:

Now I need to add some stuff to the tabs javascript file (in my case, tabs.js).


$function() {
$('Continue<\/a><\/p>').prependTo('#first-continue').find('a').click(
function() {
$('#container').triggerTab(2);
return false;
});
$('Continue<\/a><\/p>').prependTo('#second-continue').find('a').click(function() {
$('#container').triggerTab(3);
return false;
});
$('Previous<\/a><\/p>').prependTo('#first-previous').find('a').click(function() {
$('#container').triggerTab(1);
return false;
});
});


Note that container is the main ID of the whole tabs structure. These names are similar to what you'll find at the jQuery tutorial. If you're using the Drupal JS Tools tabs module, you may need to change this to .drupal-tabs.

That's it. Tested in IE6, IE7, Safari3, and Firefox. You can style the look of them to appear more like buttons using the continue class with CSS.