Ein - /ausblenden ein fieldset mit jquery

Habe ich folgenden html-code:-

<!DOCTYPE html>
<html>
    <body>
        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
            <br />
            Email:
            <input type="text" />
            <br />
            Date of birth:
            <input type="text" />
        </fieldset>

        <fieldset>
            <legend>
                <button>
                    Show/Hide form
                </button>
            </legend>
            Name:
            <input type="text" />
                <br />
            Email:
            <input type="text" />
                <br />
            Date of birth:
            <input type="text" />
        </fieldset>

    </body>
</html>

Aber wie kann ich ein-und ausblenden eines Feldes gesetzt, wenn der Benutzer klickt auf den "show/hide form" - Taste, UND gibt es eine Möglichkeit, ändern Sie die Beschriftung der Schaltfläche entweder ein-oder ausblenden, basierend auf dem aktuellen status des Feldes eingestellt?
BR

wenn Sie verstecken das fieldset wird die Schaltfläche ausgeblendet zu
Nicht wenn Sie eine ausblenden und zwar so: $("button").parent().siblings().hide();
Sehr ineffizient, und mit einer Legende für die toggle-button ist nicht der richtige eh.
Aber es ist code-Weise der einfachste Weg, alles zu verstecken in einem fieldset mit Ausnahme der <legend>. Es sei denn, Sie wollen zum hinzufügen von Klassen zu jedem anderen Kind-element (die nicht immer eine option). Auch, die Menschen oft machen remakrs, dass die fieldsets nicht verwendet werden, wie Sie sollten. Um ehrlich zu sein bin ich nicht einverstanden. Wenn es ist funktional und sieht gut aus, verwenden Sie es. Fieldsets viel besser Aussehen als begrenzt divs mit einem <h3> innerhalb.

InformationsquelleAutor john poal | 2012-08-30

html jquery

Wenn fieldset verborgen ist Ihr button versteckt ist auch. Sie können ändern Sie Ihr markup und verwenden toggle Methode:

<button class='toggle'>Hide</button>
<fieldset>
Name: <input type="text" /><br />
Email: <input type="text" /><br />
Date of birth: <input type="text" />
</fieldset>

$('.toggle').click(function(){
   var $this = $(this);
   $this.text( $this.text() == 'Show' ? "Hide" : "Show" )
   $this.next().toggle()
})

Dankeschön.

InformationsquelleAutor undefined

Ihren HTML-CODE ein:

<button>Show/Hide form</button>

    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br />
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>
    <br/>
    <button>Show/Hide form</button>
    <fieldset>
    <legend></legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
    </fieldset>

Ihre jQuery-CODE:

 $(function(){
        $('button').click(function(){  
                if( $(this).html()=='Show/Hide form') $(this).html('Hide');
            $(this).nextAll('fieldset:first').toggle();

            $(this).html()=='Show'?($(this).html('Hide')):($(this).html('Show'));
        });
    })