Jquery Toggle Problem

How would I go about hiding the select element and w开发者_开发百科henever I click the button it would get displayed and when I click it again it would hide it? So far I have the following code It seems to not be working as I expected it to. I know toggle is probably the method in solving this problem in jquery.

<form id="myForm">
<input type='button' name='button' id='testbtn' value='Test Button' />
<br>
<select style="visibility:hidden" id='List' name='List'/>
</form>

$("#testbtn").click(function() {
   $('#List').toggle();
});

Change:

<select style="visibility:hidden" id='List' name='List'/> </form>

To:

<select style="display:none" id='List' name='List'/> </form>

jQuery.toggle modifies the display CSS property

http://api.jquery.com/toggle/

Change visibility:hidden to display:none. JQuery toggles the display attribute.

<form id="myForm">
<input type='button' name='button' id='testbtn' value='Test Button' />
<br>
<select style="display: none;" id='List' name='List'/>
</form>

$("#testbtn").click(function() {
   $('#List').toggle();
});

http://jsfiddle.net/apQYD/1/

Don't use visibility:hidden in your inline style. Use display:none instead.

as far as I know, toggle() relies on the display property, not the visibility one.

Try setting display:none instead of visibility:hidden.

<select style="display:none" id='List' name='List'/>

Here mention clearly that

The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

show i suggest another way to use class and remove style="" from select

css :

   .hide { display: none };

jQuery:

$("#testbtn").click(function() {
   $('#List').toggleClass('hide');
});

DEMO