JavaScriptライブラリJQueryを使用してdivパネルを表示/非表示にする

Question

私は最初に表示したい単純なフィールドセットとdivパネルを持っています。ボタン/イメージまたはテキストをクリックすると、divパネルが非表示になります。これを "myPanel"と呼ぶことにしましょう。ボタン/イメージまたはテキストをもう一度クリックすると、再度表示されます。今私は、以下のJavaScriptのソリューションを持っていますが、私の質問は、このためのライブラリを作成し、複数のパネルのメソッドを書き出す代わりにこれを再利用する方法です。これに類似したもの：

var panel = new library.panel("myPanel"); 

すべてのイベントは、JavaScriptライブラリで処理され、変数が定義されます。

は、次のコードを考えてみましょう：

<fieldset> 
     <legend>My Panel<a id="MyPanelExpandCollapseButton" class="pull-right" href="javascript:void(0);">[-]</a></legend> 
     <div id="MyPanel"> 
       Panel Contents goes here 
     </div> 
    </fieldset> 
    <script type="text/javascript"> 
     //This should be inside the JavaScript Library 
     var myPanelShown = true; 
     $(document).ready(function() { 
      $('#MyPanelExpandCollapseButton').click(showHideMyPanel); 
      if (myPanelShown) { 
       $('#MyPanel').show(); 
      } else { 
       $('#MyPanel').hide(); 
      } 
     }); 

     function showHideMyPanel() { 
      if (myPanelShown) { 
       $('#MyPanelExpandCollapseButton').text("[+]"); 
       $('#MyPanel').slideUp(); 
       myPanelShown = false; 
      } else { 
       $('#MyPanelExpandCollapseButton').text("[-]"); 
       $('#MyPanel').slideDown(); 
       myPanelShown = true; 
      } 
     } 
    </script> 

Answer 1

あなたはそれあなたのようにしたい場合は、それは別のJSファイル内の関数を作る、簡単です：

function showHideBlock(panelId, buttonId){ 
    if($(panelId).css('display') == 'none'){ 
     $(panelId).slideDown('normal'); 
     $(buttonId).text("[+]"); 
    } 
    else { 
     $(panelId).slideUp('normal'); 
     $(buttonId).text("[-]"); 
    } 
    } 

今、あなたがしたいパネルまたはブロックIDを渡しますhide/showとhide/showの原因となるボタンid。

onclick="showHideBlock('#MyPanel', '#MyPanelExpandCollapseButton');" 

同じことを行い、多くのプラグインがすでにあり、この

Answer 2

、別の.jsファイルを作成し、あなたが望むどのページに含めます。しかし、同じidを維持するために覚えている：3