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

Expanded approach: Unveiling the cloak of invisibility

Opacity fade-in: now you don’t see it

Some complex UI designs require smooth and subtle transitions. Try applying a gradual visibility change with fadeTo:

$("#yourDivId").fadeTo(500, 1); //  Like a ninja, you’ll never see it coming until it's there


This works well with elements styled with visibility: hidden and opacity: 0.

Using Classes for quick disguises

When you find yourself frequently toggling visibility:

.hidden { visibility: hidden; opacity: 0; }
.visible { visibility: visible; opacity: 1; transition: opacity .5s; }


Swap visibility in the blink of an eye:

$("#yourDivId").removeClass('hidden').addClass('visible'); // quality hide & seek play


Callbacks: planning the grand reveal

For complex animations, use callbacks with fadeOut:

$("#yourDivId").fadeOut('slow', function() {
    $(this).css('visibility', 'hidden').css('display', 'block').fadeTo(500, 1); // Surprise! Here I am!
});


Unmasking the nuances: Avoid the pitfalls

Reserving stage space

Using visibility: hidden maintains an element’s space in layout. When document flow is a key concern, pick visibility over display.

Browsers without CSS3? No problem!

Ensure all users enjoy a similar experience by offering alternatives:

if(!$.support.opacity) {
  $("#yourDivId").css('visibility', 'visible'); // Tough luck opacity, we've got visibility!
}


Combined forces: Maximum effect

Partnering jQuery with CSS transitions grants granular control over element visibility transitions.

On-demand invisibility cloak

To enable dynamic interaction:

$("#toggleButton").click(function(){
    var $target = $("#yourDivId");
    if ($target.css('visibility') == 'hidden') {
        $target.css('visibility', 'visible').fadeTo(500, 1); // Abracadabra!
    } else {
        $target.fadeTo(500, 0, function(){
            $(this).css('visibility', 'hidden'); // Now you see me, now you don't
        });
    }
});
