jQuery flexible hide / show von Field

Question

Ich mag einige Fieldset mit der Option verbessern, um ein- / auszublenden dessen Inhalt ihr Label auf klicken.

Derzeit ist die HTML sieht wie folgt aus:

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

Also, auf Klick auf einer fieldset legend, alles anderes als angeklickten Legende der Mutter Fieldset umgeschaltet werden soll.

Ich habe versucht, mit dieser:

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

Aber es macht nichts (auch nicht den Inhalt an erster Stelle verstecken). Natürlich will ich nur die Ansicht wechseln fieldset auf die sehr der Benutzer geklickt hat, so ist es festzustellen, muss irgendwie etwas Legende wurde angeklickt und dann den Inhalt der entsprechenden Feldgruppen verbergen.

Sicher, konnte ich sie alle IDs geben und den Code für jeden Fieldset schreiben, aber das ist ziemlich überflüssig zu sehen, es würde immer gleich sein Ich denke, es hat einen Weg, um diese Funktionalität universell für jede Menge Fieldset zu machen .. .

Jeder hat eine nette Idee?

Answer 1

Wenn ich Sie war ich würde wickeln Inhalt Fieldset in div, und es wie folgt aus:

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

So, jetzt, wenn Sie auf dem Etikett klicken, wird es den Inhalt schiebt nach oben / unten und lassen Sie Ihr Etikett sichtbar.

Answer 2

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

Das funktioniert. Es ist das gleiche Konzept wirklich, sondern nur die inverse.

Answer 3

Erweiterte Version

HTML (Legende enthält [-] Spanne):

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

JavaScript (erfordert 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); } );
    });
});