If selector hidden, perform function on another selector

Question

I'm a bit of a noob and can't figure out how to make my if statement work.

All I want to do is position box2 210px to the left if class box1 is hidden.

$(document).ready(function(){
    $("span:eq(0)").click(function(){
        $(".box1").toggle("slow");
    });

    $("span:eq(1)").click(function(){
        $(".box2").toggle("slow");
    });

    $("span:eq(2)").click(function(){
        $(".box3").toggle("slow");
    });

    $("span:eq(3)").click(function(){
        $(".box4").toggle("slow");
    });

    if($(".box1").is(":hidden")){
       $(".box2").css("left","210px");
    } else {
        return;
    }
});

Any ideas would be greatly appreciated, thanks.

Here's a jFiddle

Answer 1

EDIT:

Try this new JSFiddle

I call the function after toggle was finished:

$("span:eq(0)").click(function(){
      $(".box1").toggle("slow", function(){
          changeProperty();   
      });          
});

I think that when you verify if is hidden or not, the element have ever the property display = block, but if you call after toggle() it return the real state of element.

function changeProperty(){

    if($(".box1").is(":hidden")){
         $(".box2").css({"left":"210px"});
     }
    else
     {
        $(".box2").css({"left":"0"});
     }
}

Answer 2

Is this what you wanted?

     if($(".box1").is(":hidden")){
         $(".box2").css("left","210px");
     }else{
         $(".box2").css("left","0"); // default
     }

Answer 3

Try to edit this: hope this would help you.

if($(".box1").is(":hidden")){
         $(".box2").css({"left":"210px"});
     }
else
     {
        $(".box2").css({"left":"0"});
     }