Jqueryのトグル - 複数のdivでの展開/折りたたみ

Question

最近、私はJqueryコードを使いやすくなっています。

コードは最初のdivに取り組んでいますが、同じ構造のリストが複数あるといい、特定の2番目または3番目のdivをクリックして作業するようにします。

次のコードを動的に拡張できるかどうか疑問に思っています。 2つのdiv（最初の一つだけが動作します）との

例：

<a id="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a id="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 

のjQuery：idは、ページ上で一意である必要があるため、

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

$(function() // run after page loads 
{ 
    $("#toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $("#content, #contentHidden").toggle(); 
    }); 
}); 

Answer 1

まず、Idは各DOMツリーオブジェクトに一意である必要があります。あなたの問題のため （ID =「トグル」を持つ複数のdiv要素は、最終的に働くだろうが、recommandedされていないこの場合、クラス属性を優先。。）

私はお勧め：

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div> 

とjQueryコード：

$(function() 
{ 
    $(".toggle").click(function() 
    { 
     // hides children divs if shown, shows if hidden 
     $(this).children("div").toggle(); 
    }); 
}); 

Answer 2

それは最初のdivでのみ動作します。複数のタグを操作するには、クラスを使用する必要があります。

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div> 
<div class="content">Content 1</div> 
<div class="contentHidden" style="display:none;">Hidden 1</div> 
</div> 
<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div> 
<div class="content">Content 2</div> 
<div class="contentHidden" style="display:none;">Hidden 2</div> 
</div> 

のjQuery：まず

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 

$(function() // run after page loads 
{ 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(".content, .contentHidden", $(this).next()).toggle(); 
    }); 
}); 

Answer 3

：あなたは同じid（トグル）を複数回使用することはできません。それはページ上の同じIDを再使用するには、有効なHTMLではないので

<a class="toggle" href="#">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="#">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 

$('.toggle').click(function() { 
    var content = $(this).next(); 
    $(content).toggle(); 
    $(content).next().toggle(); // three lines above can also be done in a one-liner, but I prefer separate line for readability. In the end it's a matter of taste 
    return false; 
}); 

私はclassにidトグル変更しました。 IDは一意でなければなりません。

.next()は、id属性は一意である必要があり、ツリー

Answer 4

に次のDOM要素（姉妹）を選択します。あなたは、クラスにそれを変更する必要があります。この場合には一つだけ作品をイベントにのみ、最初に一致したIDに添付されているので：あなたは複数回のIDを使用してはならないすべての

$(function() // run after page loads 
{ 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 

    return false; 
    }); 
}); 

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div>Content 1</div> 
<div style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div>Content 2</div> 
<div style="display:none;">Hidden 2</div> 

Answer 5

拳。とにかくあなたはこのよう

を行うことができ：（http://jsfiddle.net/7Kmny/）

<a class="toggle" href="javascript:void(0);">Expand box 1</a> 
<div id="content">Content 1</div> 
<div id="contentHidden" style="display:none;">Hidden 1</div> 

<br><br> 

<a class="toggle" href="javascript:void(0);">Expand box 2</a> 
<div id="content">Content 2</div> 
<div id="contentHidden" style="display:none;">Hidden 2</div> 
    $(".toggle").click(function() 
    { 
    // hides matched elements if shown, shows if hidden 
    $(this).next().toggle(); 
    $(this).next().next().toggle(); 
    });