jQuery masquer/afficher des ensembles de champs

Question

Je souhaite améliorer certains fieldsets avec la possibilité d'afficher/masquer leur contenu en cliquant sur leur libellé.

Actuellement, le HTML ressemble à ceci:

<fieldset> 
    <legend>Fieldset 1</legend> 
    <!-- Some input, p, div, whatever --> 
</fieldset> 
<fieldset> 
    <legend>Fieldset 2</legend> 
    <!-- Some input, p, div, whatever --> 
</fieldset> 

Ainsi, le clic d'un fieldset legend, autre chose que la légende de la clique fieldset parent doit être basculée.

J'ai essayé d'utiliser ceci:

$("fieldset *:not(legend)").hide(); 
$("fieldset legend").click(function(){ 
    $(this).nextAll().slideToggle(); 
}); 

Mais il ne fait rien (même pas cacher le contenu en premier lieu). Bien sûr, je ne veux que basculer la vue sur l'ensemble de champs sur lequel l'utilisateur a cliqué, donc il doit d'une manière ou d'une autre déterminer quelle légende a été cliquée puis masquer le contenu des fieldsets correspondants. Bien sûr, je pourrais leur donner tous les IDs et écrire le code pour chaque fieldset, mais c'est plutôt redondant en voyant qu'il serait toujours le même je pense qu'il doit y avoir un moyen de rendre cette fonctionnalité universelle pour n'importe quel nombre de fieldsets. ..

Quelqu'un a une idée géniale?

Answer 1

Si je vous je conclurai contenu dans div fieldset, et comme ça:

<script type="text/javascript"> 
     $(function(){ 
      $('legend').click(function(){ 
       $(this).parent().find('.content').slideToggle("slow"); 
      }); 
     }); 
</script> 

<fieldset> 
    <legend>Fieldset 1</legend> 
    <!-- Some input, p, div, whatever --> 
    <div class="content"> 
     this<br /> 
     is<br /> 
     content<br /> 
    </div> 
</fieldset> 
<fieldset> 
    <legend>Fieldset 2</legend> 
    <!-- Some input, p, div, whatever --> 
    <div class="content"> 
     this<br /> 
     is<br /> 
     content<br /> 
    </div> 
</fieldset> 

Alors maintenant, lorsque vous cliquez sur l'étiquette, il glissera le contenu haut/bas et laissez votre étiquette visible.

Answer 2

$(function(){ 
    $('legend').click(function(){ 
    $(this).siblings().slideToggle("slow"); 
    }); 
}); 

Cela fonctionne. C'est vraiment le même concept, juste l'inverse.

Answer 3

version étendue

HTML (légende contient [-] durée):

<fieldset> 
    <legend>My Area <span>[-]</span></legend> 
    Content of fieldset... 
</fieldset> 

JavaScript (nécessite jQuery):

$(function(){ 
    // Set cursor to pointer and add click function 
    $("legend").css("cursor","pointer").click(function(){ 
     var legend = $(this); 
     var value = $(this).children("span").html(); 
     if(value=="[-]") 
      value="[+]"; 
     else 
      value="[-]"; 
     $(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); }); 
    }); 
});