Question

I’ve been running in to a wall on this one…any help would be much appreciated.

I have a site with a custom horizontal accordion near the top. At the bottom, I have a button that triggers a custom drawer animation.

The problem: When I click the button at the bottom, the horizontal accordion is affected. The accordion automatically reverts to pane 1 if it is on pane 2, 3, 4 or 5.

Any ideas?

Here’s all the code in jsfiddle: http://jsfiddle.net/banjodrill/STR2R/1/

I will post an example URL in the comments since I’m a relatively new user and can’t put more than one link in a post.

Answer 1

The problem is your panes are moved by any a getting clicked. So you can specify in a few different ways. here’s one way :

$('#navigation li a').click(function(){                      
  $('.pane').removeClass("selected");
  $('.content').hide().css({opacity:0});  
  $(this).next('.content').animate({'width':'toggle'}, 'slow', 'swing').fadeTo('slow',1);  
  $(this).find('.pane').addClass("selected");
});