Home/ Questions/Q 8471701
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T16:52:03+00:00

I have the following html code:- <!DOCTYPE html> <html> <body> <fieldset> <legend> <button> Show/Hide

  • 0

I have the following 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>

But how i can show and hide a field set if the user clicks on the “show/hide form” button AND is there a way to change the button label to be either show or hide based on the current status of the field set?
BR

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0