Darren Ingramのシンプル折りたたみパネルのjQueryプラグインを使用して、 "Expand All"と "Collapse All"を実装するにはどうすればいいですか？

Question

Darren IngramのSimple Collapsible Panel jQueryプラグインで使用するために、「Expand All」と「Collapse All」ボタンを実装する方法を探しています。

http://www.darreningram.net/pages/examples/jQuery/CollapsiblePanelPlugin.aspx

誰でもへの崩壊のいずれかが発生したり、拡大展開または縮小し、その回答に基づいているかどうかを評価する方法を知っていますか？私はこの牽引力を得ることができないようです。

おかげで、

アーン

Answer 1

これは、すべての項目を切り替えることができます：

$(".collapsibleContainerContent").slideToggle(); 

これは、すべての項目が表示されます：

$(".collapsibleContainerContent").slideDown(); 

これは、すべての項目を非表示になります。

$(".collapsibleContainerContent").slideUp(); 

Answer 2

うーん、あなたは試してみました：あなたはdarrensパネルをクリックすると

$('#COLLAPSEALL').click(function(){ 
    $('.collapsibleContainerContent').hide(slow); 
}); 

$('#EXPANDALL').click(function(){ 
    $('.collapsibleContainerContent').show(slow); 
}); 

を私は見るだけdiferenceは、displayプロパティがnoneにブロックから変更されたので、ショーと非表示が機能しなければならないことです。

Answer 3

@Josephおよび@rsan。私はプラグインが好きで、それをかなり簡単に実装することができましたが、必要な "Expand All"と "Collapse All"関数を私にエスケープする方法と、答えのコードを検索する時間がありません。私は、私が前進するより簡単なアプローチを決めました。私はテンプレートがLightCMSにあるのが好きです。それはシンプルに保つ

jQuery(document).ready(function ($) { 
     $('.collapsible').hover(
     function() { 
      $(this).css('text-decoration', 'underline'); 
     }, 
     function() { 
      $(this).css('text-decoration', 'none'); 
     }); 

     $('.collapsible').next().hide(); 
     $('.collapsible').click(function() { 
      $(this).next().slideToggle(); 
     }); 
    });  

は私が書くことができます：idSlideCollapsibleBlueはそうのように、ちょうどH3の下にあるdiv要素のIDです

$("#idSlideCollapsibleBlue").slideUp('slow'); 

。

<h3 id="idCollapsibleBlue" class="collapsible" title="New">Telecom: Add New Users</h3> 
     <div id="idSlideCollapsibleBlue" title="Telecom: Add New Users"> 

thiisをご覧いただきありがとうございます。それは有り難いです。

-Arnold