jQuery flexible hide/show of fieldsets

Question

Desidero migliorare alcuni set di campi con l'opzione di mostrare/nascondere il loro contenuto facendo clic sulla loro etichetta.

Attualmente, il codice 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> 

Così, al clic di un fieldset legend, tutt'altro che la leggenda cliccato del fieldset genitore dovrebbe essere attivato.

Ho provato ad utilizzare 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 attivare la vista sul campo che l'utente ha cliccato, quindi deve in qualche modo determinare quale legatura è stata cliccata e quindi nascondere il contenuto dei campi corrispondenti.

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

Qualcuno ha una buona idea?

Answer 1

Se fossi in te avrei avvolgo contenuto di fieldset nel div, e in quel 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> 

Così ora quando si fa clic sull'etichetta essa scivolerà il contenuto su/giù e lasciare la vostra etichetta visibile.

Answer 2

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

Questo funziona. È lo stesso concetto in realtà, solo l'inverso.

Answer 3

Versione estesa

HTML (leggenda contiene [-] arco):

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