jQuery Tools: wait accordion slide to finish, then show images in accordion

Question

I'm using jQuery Tool's tabs an accordion as per here: http://www.jquerytools.org/demos/tabs/accordion.htm

The whole thing is activated with

Code:

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

While the content of the panes is revealed with a slide function, in my setup, I would like the images within the pane to be shown only once the slide animation has finished, plus the image of the current tab should be hidden again as soon as an accordion header is clicked. I've fiddled around but couldn't get it to work.

I thought of setting the images to display:none; and then change them to display once the rest of the content is revealed?

Can I do this by adding something to the above code? Many thanks

Answer 1

I think you'll want to do a custom animation. It should be pretty straight forward.

  $.tools.tabs.addEffect("custom", function(tabIndex, done) {

  // hide any images
  $("#accordion img").hide();

  // hide all panes and show the one that is clicked, on complete show images
  this.getPanes().hide().eq(tabIndex).show('fast',function(){
      //show the images again now that the animation has finished
      $("#accordion img").show();
  });

  // the supplied callback must be called after the effect has finished its job
  done.call();
  });

Then you can replace the animation effect 'slide' with 'custom'.