$("#page-wrap div.button").click(function(){

$clicked = $(this);

// if the button is not already "transformed" AND is not animated if ($clicked.css("opacity") = "1" && $clicked.is(":not(animated)")) {

$clicked.animate({

opacity

1,

borderWidth

5 }, 600 );

// each button div MUST have a "xx-button" and the target div must have an id "xx" var idToLoad = $clicked.attr("id").split('-');

//we search trough the content for the visible div and we fade it out $("#content").find("div:visible").fadeOut("fast", function(){ //once the fade out is completed, we start to fade in the right div $(this).parent().find("#"+idToLoad[0]).fadeIn(); }) }

//we reset the other buttons to default style $clicked.siblings(".button").animate({ opacity: 0.5, borderWidth: 1 }, 600 );

});

Macros ↑

BUTTON{"text" ...} -- renders a nice button

Submit Cancel

TABPANE{...} -- tabpane widget

http://foswiki.org/System/JQueryPlugin

http://foswiki.org/Development.UsingJQueryWithFoswiki

-- ChrisChen - 29 Nov 2011