Nascondi / mostra flessibile jQuery di set di campi

Question

Voglio migliorare alcuni set di campi con l'opzione per mostrare / nascondere i loro contenuti facendo clic sulla loro etichetta.

Attualmente, l'HTML è simile al seguente:

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

Quindi, facendo clic su una legenda fieldset , tutto tranne la legenda cliccata del fieldset genitore dovrebbe essere attivata / disattivata.

Ho provato a usare questo:

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

Ma non fa nulla (nemmeno nascondere i contenuti in primo luogo). Ovviamente voglio solo cambiare la vista sul campo stesso su cui l'utente ha fatto clic, quindi deve in qualche modo determinare quale legenda è stata cliccata e quindi nascondere il contenuto dei corrispondenti set di campi.

Certo, potrei dare loro tutti gli ID e scrivere il codice per ogni fieldset, ma è piuttosto ridondante visto che sarebbe sempre lo stesso penso che ci debba essere un modo per rendere universale questa funzionalità per qualsiasi quantità di set di campi. .

Qualcuno ha un'idea chiara?

Answer 1

Se fossi in te avvolgerei il contenuto di fieldset in div, e in questo modo:

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

Quindi ora quando fai clic sull'etichetta, il contenuto verrà spostato su / giù e lascerà l'etichetta visibile.

Answer 2

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

Funziona. In realtà è lo stesso concetto, proprio l'inverso.

Answer 3

Versione estesa

HTML (la legenda contiene [-] span):

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

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