jQuery flexible masquer / afficher des champs

Question

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

Actuellement, le code 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, au clic d'une légende de groupe de champs , tout ce qui ne correspond pas à la légende sélectionnée du groupe de champs parent doit être basculé.

J'ai essayé d'utiliser ceci:

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

Mais cela ne fait rien (même pas cacher le contenu en premier lieu). Bien sûr, je souhaite uniquement basculer la vue sur le groupe de champs sur lequel l'utilisateur a cliqué. Il doit donc déterminer quelle légende a été sélectionnée, puis masquer le contenu des groupes de champs correspondants.

Bien sûr, je pourrais leur donner tous les ID et écrire le code pour chaque ensemble de champs, mais c'est plutôt redondant de le voir rester identique. Je pense qu'il doit y avoir un moyen de rendre cette fonctionnalité universelle pour n'importe quel nombre d'ensembles de champs. .

Quelqu'un a-t-il une bonne idée?

Answer 1

Si j’étais vous, j’envelopperais le contenu de fieldset dans div, et je l’aimerais comme ceci:

<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, le contenu glisse vers le haut / bas et laisse votre étiquette visible.

Answer 2

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

Cela fonctionne. C’est vraiment le même concept, à l’inverse.

Answer 3

Version étendue

HTML (la légende contient [-] span):

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