jQuery ocultar flexível / mostrar de fieldsets

Question

Eu quero melhorar alguns fieldsets com a opção para exibir / ocultar seu conteúdo Ao clicar seu rótulo.

Atualmente, os olhares HTML como este:

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

Assim, no clique de um fieldset legend, qualquer coisa, mas a lenda clicado do fieldset pai deve ser alternado.

Eu tentei usar o seguinte:

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

Mas não faz nada (nem mesmo esconder o conteúdo em primeiro lugar). Claro que eu quero apenas alternar a vista sobre o próprio conjunto de campos que o usuário clicou, por isso tem de determinar de alguma forma o que lenda foi clicado e, em seguida, esconder o conteúdo dos conjuntos de campos correspondentes.

Claro, eu poderia dar-lhes todos os IDs e escrever o código para cada conjunto de campos, mas isso é um pouco redundante vendo seria sempre o mesmo Eu acho que tem que haver uma maneira de fazer essa funcionalidade universal para qualquer quantidade de fieldsets .. .

Qualquer um tem uma idéia legal?

Answer 1

Se eu fosse você eu embrulhar o conteúdo de fieldset no div, e a ele assim:

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

Agora, quando você clicar no rótulo ele irá deslizar o conteúdo para cima / baixo e deixe o seu rótulo visível.

Answer 2

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

Isso funciona. É o mesmo conceito realmente, apenas o inverso.

Answer 3

Versão estendida

HTML (legenda contém [-] span):

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

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