。非関連要素をクリックして、水平方向のアコーディオンを破壊します

Question

私はこれで壁に走っています...どんな助けも大歓迎です。

私は上部近くにカスタムの水平アコーディオンを備えたサイトを持っています。下部には、カスタムドロワーアニメーションをトリガーするボタンがあります。

問題：下部のボタンをクリックすると、水平なアコーディオンが影響を受けます。アコーディオンは、ペイン2、3、4、または5にある場合、自動的にペイン1に戻ります。

何か案は？

これがJSFiddleのすべてのコードです： http://jsfiddle.net/banjodrill/str2r/1/

私は比較的新しいユーザーであり、投稿に複数のリンクを入れることができないため、コメントにURLの例を投稿します。

Answer 1

問題は、ペインがいずれかによって移動されていることです a クリックします。したがって、いくつかの異なる方法で指定できます。これが1つの方法です：

$('#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");
});