CODEWITHSUNDEEP
jquerycsshtmlvisibility
Scott Robertson
Scott Robertson

Reputation: 223

visibility:visible/hidden div

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?

Upvotes: 18

Views: 95721

Answers (6)

Binita Bharati
Binita Bharati

Reputation: 5898

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()

Upvotes: 0

Ram
Ram

Reputation: 144689

You can use the show and hide methods:

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

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

Upvotes: 25

Linmic
Linmic

Reputation: 791

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?

Upvotes: 5

brains911
brains911

Reputation: 1310

Another option:

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

You can also use fadeToggle and slideToggle

Upvotes: 2

arychj
arychj

Reputation: 711

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

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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

Upvotes: 0

Related Questions