Show/hide A Fieldset Using Jquery

I have the following html code:-

Solution 1:

When fieldset is hidden your button is hidden too. You can modify your markup and use toggle method:

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

Solution 2:

Your HTML CODE:

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

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

Your JSFIDDLE:

http://jsfiddle.net/bzAkL/