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:

<buttonclass='toggle'>Hide</button><fieldset>
Name: <inputtype="text" /><br />
Email: <inputtype="text" /><br />
Date of birth: <inputtype="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: <inputtype="text" /><br />
    Email: <inputtype="text" /><br />
    Date of birth: <inputtype="text" /></fieldset><br /><button>Show/Hide form</button><fieldset><legend></legend>
    Name: <inputtype="text" /><br />
    Email: <inputtype="text" /><br />
    Date of birth: <inputtype="text" /></fieldset><br/><button>Show/Hide form</button><fieldset><legend></legend>
    Name: <inputtype="text" /><br />
    Email: <inputtype="text" /><br />
    Date of birth: <inputtype="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/