フィールドセットのjQuery柔軟な非表示/表示

Question

ラベルをクリックしたときにコンテンツを表示/非表示にするオプションを使用して、一部のフィールドセットを強化したい。

現在、HTMLは次のようになっています。

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

そのため、1つの fieldset legend をクリックすると、親フィールドセットのクリックされた凡例以外はすべて切り替える必要があります。

これを使用してみました：

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

しかし、何もしません（そもそも内容を隠しません）。もちろん、ユーザーがクリックしたフィールドセットのビューのみを切り替えたいので、クリックされた凡例を特定し、対応するフィールドセットの内容を非表示にする必要があります。

もちろん、すべてのフィールドセットにすべてのIDを与えてコードを書くことはできますが、それは常に同じであるため、かなり冗長です。 。

誰でも素敵なアイデアを持っていますか？

Answer 1

私があなただったら、divでfieldsetのコンテンツをラップし、そのようにします：

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

ラベルをクリックすると、コンテンツが上下にスライドし、ラベルが表示されたままになります。

Answer 2

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

これは動作します。それは本当に同じ概念であり、ただ逆です。

Answer 3

拡張バージョン

HTML（凡例には[-]スパンが含まれます）：

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

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