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?

Solution 1

You can use the show and hide methods:

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

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

Solution 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?

Solution 3

Another option:

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

You can also use fadeToggle and slideToggle

Comments

[Scott Robertson]

hey thanks for your reply, I want the div to be hidden first, would i need use the same function hide() or can i just use the CSS visibilty property

[Ram]

@Scott Robertson, you are welcome, you can hide the div outside of event handler, hide sets display:none to an element.

[Scott Robertson]

hmm maybe I didn't implement it properly I'm still learning alot of this stuff. In my CSS file i placed display:none in the properties of imageShowWrapper but now the Jquery wont affect the div

[Scott Robertson]

this is exatcly what I want and is pretty much what my original code is, its just doesn't work for some reason.Thanks for reply

[Scott Robertson]

There is obviously something more to my script stopping this from working, Thanks for all replies