visibility:visible/hidden div

Question

What is the best way to show a div when clicked on a button and then hide it with a close button??

My Jquery code is as follows:

$(".imageIcon").click(function(){
$('.imageShowWrapper').css("visibility", 'visible');
});
 $(".imageShowWrapper").click(function(){
$('.imageShowWrapper').css("visibility", 'hidden');
});

except the problem I'm having is it closes automatically without any clicks. It loads everything ok, displays for about 1/2 sec and then closes. Any ideas?

Answer 1

You can use the show and hide methods:

$(".imageIcon").click(function() {
    $('.imageShowWrapper').show();
});

$(".imageShowWrapper").click(function() {
    $(this).hide();
});

Answer 2

According to your requirement, I believe what you need is as simple as this: http://jsfiddle.net/linmic/6Yadu/

However, using the visibility is different from using show/hide function, gory details: What is the difference between visibility:hidden and display:none?

Answer 3

Another option:

$(".imageIcon, .imageShowWrapper").click(function() {  
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));     
});

You can also use fadeToggle and slideToggle