Jquery .show() not revealing a div with visibility of hidden

85
votes

Basic jQuery question:

I am trying to reveal a div that has been marked as hidden using jQuery. But am not quite getting it

I've created a JSFiddle here: http://jsfiddle.net/VwjxJ/

Basically, I want to use style="visibility: hidden;" rather than style="display: none;" as I want the space of the hidden element to be maintained

Have tried using show(), fadeIn() etc but neither work (they do for style="display: none;")

what am I doing wrong?

6
javascriptjqueryhtml
Try changing the framework on your jsfiddle to jQuery. - a'r
@a'r: The problem still remains. Here is a corrected version: jsfiddle.net/fkling/9Z6nt/19 - Felix Kling
In your example you didn't set up the right library for your project, in the "choose framework" you should choose "jQuery". - megas
+1 to counter the downvotes.... people should spend more time trying to understand the problem... - Felix Kling
I think it was because other people thought you just forgot to select the right library (and after changing it, it seemed to worked). But they didn't read your question and the code carefully. Why else would the first comment get 5 upvotes? Yes, maybe your jsfiddle was not correct, but that is no reason for downvotes imo. The problem was clear even without that (and it was easy to fix). - Felix Kling

6 Answers

125
votes

If you have hidden it with visibility:hidden then you can show it with jQuery by

$(".Deposit").css('visibility', 'visible');

And in the fiddle you are missing jQuery. Here is a demo: http://jsfiddle.net/9Z6nt/20/

11
votes

According to JQuery documentation .show() "is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially." Set the style explicitly instead. You could use a CSS class 

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

and set is using 

$("#yourdiv").removeClass("hidden").addClass("shown");
8
votes

If you want the space of the hidden element to be maintained, use opacity.

i.e:

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

for example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>
3
votes

Hey man your fiddle is working just choose framework jQuery on the fiddle. If its visibility hidden then change the css visibility property to visible.

(".Deposit").css('visibility','visible');

2
votes

here we go :)

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });
0
votes
$(".Deposit").show();

$(".Deposit").fadeTo(500,0);