CODEWITHSUNDEEP
jquerycss
Samuel Ochoa
Samuel Ochoa

Reputation: 153

Change margin if object is visible jquery

I want to change the top property of the object .content if the object .nav-wrapper has the property display set to block.

This is my actual (not working) code:

$(document).ready(function(){
     $("#menu").click(function(){
          $(".nav-wrapper").slideToggle("slow");

          if($(".nav-wrapper").css("display") == "block"){
               $(".content").css("top","340px");
          }
          else{
               $(".content").css("top","105px");
          }
     });
});

Can someone help me figuring out how to make this work?

Upvotes: 0

Views: 65

Answers (2)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

You need to check the condition after the animation is done.

Also, check is it is visible instead of the CSS property display

$(document).ready(function(){
    $("#menu").click(function(){
        $(".nav-wrapper").slideToggle("slow",function(){

            if($(".nav-wrapper").is(':visible')){
                $(".content").css("top","340px");
            }
            else{
                $(".content").css("top","105px");
            }
        });
    });
});

Upvotes: 2

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

The following code will make your code very procedural, But on the other hand, The default positioning static don't has a property called TOP. so you should check whether it is having any positioning rather than the default.

Try,

      if($(".nav-wrapper").is(":visible"){
           $(".content").css("top","340px");
      }
      else{
           $(".content").css("top","105px");
      }

Upvotes: 1

Related Questions