Jquery toggle - développer/réduire sur plusieurs divs

Question

J'ai récemment trouvé un code Jquery très facile à utiliser, qui bascule et div visible et non visible.

Le code fonctionne sur la première div - mais disons que j'ai plusieurs avec la même liste de structure vers le bas, et je veux que la bascule fonctionne sur le second ou troisième div im click spécifique.

Je me demande s'il est possible de développer le code suivant pour être dynamique pour cela.

Exemple avec deux divs (seulement premier fonctionnera):

<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:

<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

Tout d'abord, un identifiant doit être unique sur chaque objet arbre DOM. (multiple div id = "bascule" finirait par travailler mais n'est pas recommandé Préférez l'attribut class dans ce cas..)

pour votre problème, je suggère:

<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> 

et le code jQuery:

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

Answer 2

Il fonctionne uniquement avec la première div parce id doit être unique à la page. Vous devez utiliser des classes pour travailler avec plusieurs tags.

<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

Premièrement: vous ne pouvez pas utiliser le même identifiant (bascule) à plusieurs reprises.

<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; 
}); 

J'ai changé à bascule id-class car il n'est pas valide HTML pour réutiliser le même identifiant sur la page. Id doit être unique.

.next() sélectionne l'élément suivant dom (sœur) dans l'arbre

Answer 4

L'attribut id doit être unique. Vous devez changer à une classe:

$(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

Fist de tout ce que vous ne devez pas utiliser ids plus d'une fois: dans ce cas, un seul fonctionne parce que l'événement est fixé uniquement sur le premier id correspondant.

Quoi qu'il en soit, vous pouvez faire comme ceci: (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(); 
    });