CODEWITHSUNDEEP
jquerycss
4thSpace
4thSpace

Reputation: 44312

How to display hidden div using jquery?

I'd like to display a hidden div using jquery. For some reason, show() isn't working in my example. If I remove the hidden attribute and use hide(), that does work.

Any ideas what I'm doing wrong?

<div id="mydiv" style="visibility:hidden">some text</div>
<button onclick="$('#mydiv').show();">click me</button>

http://jsfiddle.net/5pmLw8r2/

Upvotes: 1

Views: 655

Answers (4)

marco811
marco811

Reputation: 48

You can use a css function:

$('#mydiv').css('visibility', 'visible');

http://jsfiddle.net/iam_groot/Loyvpm1y/

Or just use a display poperty:

<div id="mydiv" style="display:none;">some text</div>
<button onclick="$('#mydiv').show();">click me</button>

http://jsfiddle.net/iam_groot/gfeovoby/1

Upvotes: 0

Mouhamad Kawas
Mouhamad Kawas

Reputation: 370

<div id="mydiv" style="visibility:hidden">some text</div>
<button onclick="$('#mydiv').css('visibility', 'visible');">click me</button>

Upvotes: 0

Sani Huttunen
Sani Huttunen

Reputation: 24375

You can modify the CSS instead:

<button onclick="$('#mydiv').css('visibility', 'visible');">click me</button>

If you want to use hide() and show() you can instead use the display attribute:

<div id="mydiv" style="display: none;">some text</div>

Upvotes: 0

DaveB
DaveB

Reputation: 3083

try using display:none instead of visibility:hidden

the .show and .hide() toggle display attribute not visibility

Upvotes: 2

Related Questions