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?

Ram · Accepted Answer · 2015-08-27T08:16:25.103

25

You can use the show and hide methods:

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

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

edited Aug 27 '15 at 08:16

answered May 01 '12 at 02:53

Ram

143,282
16
168
197

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 – Scott Robertson May 01 '12 at 03:13
2

@Scott Robertson, you are welcome, you can hide the div outside of event handler, hide sets `display:none` to an element. – Ram May 01 '12 at 03:27
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 May 01 '12 at 03:36
There is obviously something more to my script stopping this from working, Thanks for all replies – Scott Robertson May 01 '12 at 04:05

score 5 · Answer 2 · edited May 23 '17 at 11:54

5

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?

edited May 23 '17 at 11:54

Community

1
1

answered May 01 '12 at 03:30

Linmic

761
4
12

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 May 01 '12 at 03:46

score 2 · Answer 3 · answered May 01 '12 at 03:15

2

Another option:

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

You can also use fadeToggle and slideToggle

answered May 01 '12 at 03:15

brains911

1,310
7
5

score 0 · Answer 4 · answered May 01 '12 at 02:54

You would get a smoother transition using the fade methods:

var imageIcon = $(".imageIcon"),
    imageShowWrapper = $(".imageShowWrapper");

imageIcon.on("click", function(){
  imageShowWrapper.stop().fadeIn();
});

imageShowWrapper.on("click", function(){
   $(this).stop().fadeOut();
});

Demo: http://jsbin.com/uhapom/edit#javascript,html,live

score 0 · Answer 5 · answered May 01 '12 at 03:14

0

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

answered May 01 '12 at 03:14

arychj

711
3
21

Binita Bharati · Answer 6 · 2019-01-16T01:46:07.700

Tough to say without seeing your html and jquery part of the code. But, looks like the part where you show/hide the div is getting affected by page reload ? You might be placing the code that shows/hide div inside a$(document).ready(function() { .....}) block. Also, another related point to note would be that whenever html elements like button, anchor etc is clicked, the click is considered to be of default type = submit, and the page will reload under this situation too.To stop that, one could use event.preventDefault()

visibility:visible/hidden div

6 Answers6