Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.

Below is the code which is not working :

<input type="submit" value="Add Second Driver" id="driver" />
                    <input type="text" id="text" />

$("#driver").click(function() {

    $('#text').show();

  }
 });

Also the t开发者_Go百科extbox should not be visible initially

You can use toggle instead;

$('#text').toggle();

With no parameters, the .toggle() method simply toggles the visibility of elements

try this:

$(document).ready(function(){
    $("#driver").click(function(){
       $("#text").slideToggle("slow");
  });
});

Here's an example using toggle:

http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />

$("#driver").click(function() {
    $('#text').css('display', 'block');
});

$(function()
{

    // Initially hide the text box
    $("#text").hide();

    $("#driver").click(function()
    {

         $("#text").toggle();
         return false; // We don't want to submit anything here!

    });

});

Try this:

<script type="text/javascript">
jQuery(function ($) {
    $('#driver').click(function (event) {
        event.preventDefault(); // prevent the form from submitting
        $('#text').show();
    });
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this

Code:

$(document).ready(function () {
$('#text').hidden();
 });

Then your should work the way you want.