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

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/

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");

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>

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');

here we go :)

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

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

    });