シンプルなJQueryすべて展開すべて折りたたみトグル

Question

divを展開したり折りたたんだりしています。私はまた、すべてを展開してすべてを折りたたむことができます。問題は、divがすでに展開されている場合です。ユーザーがすべて展開をクリックすると、展開されたdivは折りたたまれ、他のdivは展開されます（逆も同様です）。既に展開されていないdivをすべて展開し、折りたたまれていないdivをすべて折りたたむにはどうすればよいですか。

$(document).ready(function(){ 
    $(".toggle_container").hide(); 

    //Expand/Collapse Individual Boxes 
    $("span.expand_heading").toggle(function(){ 
     $(this).addClass("active"); 
     }, function() { 
     $(this).removeClass("active"); 
    }); 
    $("span.expand_heading").click(function(){ 
     $(this).nextAll(".toggle_container:first").slideToggle("slow"); 
    }); 

    //Show hide 'expand all' and 'collapse all' text 
    $(".expand_all").toggle(function(){ 
     $(this).addClass("expanded"); 
     }, function() { 
     $(this).removeClass("expanded"); 
    }); 

    //expand or collapse all boxes 
    $(".expand_all").click(function(){ 
     $(".toggle_container").slideToggle("slow"); 
    }); 
}); 

Answer 1

//expand or collapse all boxes 
    $(".expand_all").click(function(){ 
     if($(this).hasClass("expanded")){ 
      $(".toggle_container").slideDown("slow"); 
     } 
     else { 
      $(".toggle_container").slideUp("slow"); 
     } 
    }); 

あなたのexpand_all要素が拡大したクラスを持っているかどうかをチェックしたりせず、あなたのすべての要素を上にスライド可能性または依存する。これを行うには

Answer 2

.slideDown()と.slideUp()行う必要があります。

Answer 3

試して、あなたの選択を制限するだけで隠された値：

$(".toggle_container:hidden").slideToggle("slow"); 

http://api.jquery.com/hidden-selector/

Answer 4

より効果的かつefficeint方法は以下のようになります。

• ストア変数panelsで折り畳み式のパネルので、我々：

  $(document).ready(function() 
  { 
      var panels = $('.panel-collapse.collapse'); 
      var collapse = function() 
      { 
       if (!$(this).hasClass ('open')) return; 
       $(this).slideUp().removeClass('open').removeClass('active'); 
      }; 
      $(".panel-heading").click (function() 
      { 
       var next = $(this).next(); 
       if (next.hasClass ('active')) return; 
       panels.each (collapse); 
       next.slideToggle().toggleClass('open').addClass('active'); 
      }); 
  }); 
  

  このアプローチを考慮に以下の点を取ります はヘッダーがクリックされるたびにそれらを検索する必要はありません。

• ヘッダーをクリックしたときにパネルが既に開いている場合は、何もする必要はありません。
• クリックごとにチャンネルをリセットするときは、開いているチャンネルのみを閉じ、残りのチャンネルは無視します。完全に働いた

JSFiddle