Jquery Toggle Problem

Question

How would I go about hiding the select element and whenever 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();
});

Lots of right answers thanks guys :)

Novazero
– Novazero

2011-06-21 21:21:28 +00:00
Commented Jun 21, 2011 at 21:21 — Novazero
– Novazero, Commented Jun 21, 2011 at 21:21

Alex · Accepted Answer · 2011-06-21 21:12:39Z

4

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/

answered Jun 21, 2011 at 21:12

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barlow Tucker · Accepted Answer · 2011-06-21 21:15:58Z

2

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/

answered Jun 21, 2011 at 21:15

Barlow Tucker

6,5493 gold badges38 silver badges42 bronze badges

Comments

FishBasketGordo · Accepted Answer · 2011-06-21 21:13:20Z

0

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

answered Jun 21, 2011 at 21:13

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Comments

Jose Faeti · Accepted Answer · 2011-06-21 21:15:03Z

0

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

answered Jun 21, 2011 at 21:15

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Comments

xkeshav · Accepted Answer · 2011-06-21 21:18:40Z

0

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

answered Jun 21, 2011 at 21:18

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Collectives™ on Stack Overflow

Jquery Toggle Problem

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related