2回目のクリックでjQueryアコーディオンエフェクトを閉じるにはどうすればよいですか？

Question

最近Smacking jQueryをJake Rutterが購入しました。これは良い本ですが、私はアコーディオンのコードを少し修正しています。

セクションをクリックすると、意図したとおりに展開されますが、クリックしても（開いたままで）閉じると、即座に再び開くことができます。

2回目にクリックした場合は展開されたセクションを閉じ、クリックした場合は再び開くようにします。これが理にかなってほしい。どんな助けでも大歓迎です。

私が使用した例とコードについては、下記のデモURLをご覧ください。

http://api.jquery.com/slideUp/

は、あなたがそうするたび、あなたは内のすべてのコードを実行しようとしている部分をクリックしてクリック機能にいくつかのif/elseロジックを追加する必要があります：http://demos.d3-creative.com/accordion/accordion-1.html

Answer 1

動作させるには、以下のようなものが必要です。

var $header = $('.accordion-header'),//always cache your selectors 
    $content = $('.accordion-content'); 

$header.click(function() { 

    var $this = $(this), 
     $relatedContent = $this.next(); 

    if($relatedContent.is(':visible')) { // If the tab is already open 

     $relatedContent.slideUp('fast'); 

     $this.find('.icon-active').removeClass('icon-active'); 

     $this.removeClass('header-active'); 

    } else { // if the tab is closed 

     // Close any other opened tabs 
     $content.slideUp('fast'); 
     $header.removeClass('header-active'); 
     $header.find('span').removeClass('icon-active'); 

     // Open related tab 
     $relatedContent.slideDown('fast'); 

     $this.find('span').addClass('icon-active'); 

     $this.addClass('header-active'); 
    } 

}); 

を、あなたはJSの部分でこれを変更する必要がdisplay:none

Answer 2

は、読み取りを持っています関数。

Answer 3

#accordion .accordion-contentに追加：：コメントを参照してくださいあなたは、ヘッダーをクリックしたときになるように、私は行動を変えた

$('.accordion-header').click(function() { 
    $('.accordion-header').next().slideUp('fast'); // Close all boxes - Hide all contents 
    $('.accordion-header').removeClass('header-active'); // Remove active class from all headers 
    $(this).addClass('header-active'); // Adds active class to currently clicked element 
    $(this).next().slideDown('fast'); // Shows content 

    $('.icon-active:visible').removeClass('icon-active'); 
    $(this).find('span').addClass('icon-active'); 

}); 

最初にすべてのコンテンツボックスを閉じてから、すべてのヘッダーでアクティブなクラスを削除してから、クリックされた要素の直後のボックスをスライドして開き、クラスも変更します。コードはあなたが見ることができるようにコメントされています！

ここExemple：http://jsfiddle.net/snzSy/

また、私はアイコンについては、最後の2行を変更しませんでした！

サイドノート：私たちはどちらも初心者ですので、質問を準備する時間があれば、人々があなたを助けてくれると簡単に言えます。私たちはあなたのコードを直接テストし修正することができるので、JSのフィドルは良いです。