jQuery hide / show flexible de conjuntos de campos

Question

Quiero mejorar algunos campos con la opción de mostrar / ocultar su contenido al hacer clic en su etiqueta.

Actualmente, el HTML tiene este aspecto:

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

Por lo tanto, al hacer clic en una leyenda de conjunto de campos , cualquier cosa que no sea la leyenda en la que se hizo clic en el conjunto de campos principal debe alternarse.

Intenté usar esto:

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

Pero no hace nada (ni siquiera oculta el contenido en primer lugar). Por supuesto, solo quiero alternar la vista en el mismo conjunto de campos en el que ha hecho clic el usuario, por lo que tiene que determinar de alguna manera en qué leyenda se hizo clic y luego ocultar el contenido de los conjuntos de campos correspondientes.

Claro, podría darles todas las ID y escribir el código para cada conjunto de campos, pero eso es bastante redundante ya que siempre sería lo mismo, creo que tiene que haber una manera de hacer que esta funcionalidad sea universal para cualquier cantidad de conjuntos de campos ... .

¿Alguien tiene una buena idea?

Answer 1

Si fuera tú, envolvería el contenido de fieldset en div, y así:

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

Entonces, cuando haga clic en la etiqueta, el contenido se deslizará hacia arriba / abajo y dejará su etiqueta visible.

Answer 2

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

Esto funciona. Es el mismo concepto realmente, solo el inverso.

Answer 3

Versión extendida

HTML (la leyenda contiene [-] span):

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

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