CODEWITHSUNDEEP
jquery
user1034180
user1034180

Reputation: 83

Jquery .slideup function won't hide div

I am using the code below to show and hide a div called "map" When a link with id 'goo' is clicked the map is shown using .slideDown, but when the link is clicked again it is SUPPOSE to use .slideUp to hide the map but nothing happens.

Here is the Javascript:

 $('#goo').live('click',function()  {
   if ($("#map").css('visibility','hidden')){
     $('#map').slideDown('slow');
     $("#map").css('visibility','visible');
     $("#map").css('position','relative');
  } else {
    $('#map').slideUp('slow');
  }
  return false;
  });

If anyone has any idea where the div won't slide up, let me know!

Upvotes: 3

Views: 1240

Answers (3)

Jasper
Jasper

Reputation: 75993

jQuery's .slideUp() and .slideDown() functions do not affect the CSS visibility property. You should use display: none; rather than visibility: hidden to better conform to the functions you are trying to use.

Here is a jsfiddle of using display: none;: http://jsfiddle.net/jasper/2QWEM/1/

If you want your element to still take-up space while it's invisible, then I suggest using opacity: 0; and animating the opacity of the element:

 $('#goo').live('click',function()  {
   if ($("#map").css('opacity') == 0){
     $('#map').animate({opacity : 1}, 500);
  } else {
    $('#map').animate({opacity : 0}, 500);
  }
  return false;
  });

Docs for .slideUp(): http://api.jquery.com/slideup

On a side-note, you are using the same selector many times-over, you can chain function calls and cache your selectors to improve performance. Here is an example using your code:

$('#goo').live('click',function()  {
    var $map = $('#map');
    if ($map.css('visibility','hidden')){
        $map.slideDown('slow').css({
            visibility : 'visible',
            position   : 'relative'
        }
     } else {
        $map.slideUp('slow');
     }
     return false;
});

Upvotes: 1

optimusprime619
optimusprime619

Reputation: 764

to answer your question why it doesn't work...your if condition needs to be changed... else everything else is good.... you need to check 

 if($("#map").css('visibility') == 'visible')

else its good

check out the fiddle for the same http://jsfiddle.net/xsFRJ/

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Use slideToggle method

$('#goo').live('click',function()  {
    $('#map').slideToggle('slow');
    return false;
});

Upvotes: 2

Related Questions