Moving Corresponding Divs with a Single Click using Jquery

Question

Inside a Main Wrapper , I have 5 Divs. The very First div contains 4 Box(box_1, box_2,box_3,box_4) where my click event will occur.

Other 4 divs inside main wrapper , are the content of box_1, box_2, box_3, box_4 respectivly.

When I will click on My first box, the click event should animate the first div (slide right) and the box_1 div should slide right.

Here is a JS fiddle link what I have done so far.

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

I have added only box_1 id to slide right. I want to write a generic code for all. i.e If I click on 2nd box, 2nd box sd animate from right , If I click on 3rd box, 3rd box should animate from left.

How can I access the corressponding content divs of 4 Divs , when I click them. Note: I have attached a single click event to all 4 divs.

* Above problem Solved** New Problem,

I have added back to menu href link in every box_container section. On a click on this hyperlink, will take me back to Menu section again with animation effect of slide Right. And menu section will come to window wth slideleft animation.

The below code is working.

Problem is when I click on any box,, corresponding box container appears. When I click on hyper link option "Back to Menu", I even return back to Menu section. i.e 4 box section. The problem starts with here. If I again click on any box, moved to corresponding box container. Clickd on hyperlink to cum back, the menu i.e 4 box section just dissappers from screen.

Notice: The alert cums two times this time.

HTML

<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
    <div class="wrapper">
        <div class="row">
            <div class="box1" id="box_1"></div>
            <div class="box2" id="box_2"></div> <div class="clear"></div>
        </div>

         <div class="row">
            <div class="box3" id="box_3"></div>
            <div class="box4" id="box_4"></div> <div class="clear"></div>
        </div>

    </div>
</div><!---End of Container fluid--->

 <div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
     <h1>Box1 Content</h1>
     <a href="#" id="back1">Back to #Menu</a>
</div>
     <div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
     <h1>Box2 Content</h1>
      <a href="#" id="back2">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
     <h1>Box3 Content</h1>
      <a href="#" id="back3">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
     <h1>Box4 Content</h1>
     <a href="#" id="back4">Back to #Menu</a>
</div>

CSS

 .container_fluid {
    width:100%;
}
.wrapper {
    width:1208px;
    margin:auto;
}
.row {
    padding:3% 3% 3% 3%;
}
.box1 {
    height:100px;
    width:100px;
    background-color:red;
    margin-right:2%;
    float:left;
}
.box2 {
    height:100px;
    width:100px;
    background-color:green;
    margin-right:2%;
    float:left;
}
.clear {
    clear:both;
}
.box3 {
    height:100px;
    width:100px;
    background-color:black;
    margin-right:2%;
    float:left;
}
.box4 {
    height:100px;
    width:100px;
    background-color:brown;
    margin-right:2%;
    float:left;
}

JQUERY

    $("#back1,#back2,#back3,#back4").click(function(){
        alert($(this).attr('id'));
         $("#"+clicked_id+"_sec").animate({
            "marginRight":"-=170%"
         },
          {
            duration: 500,
            step: function() {
                console.log($(this).width());
            },
            complete: function() {

                 $("#"+clicked_id+"_sec").hide()
                        menu.show();
                          menu.animate({
                            "marginLeft":"+=150%"
                         },
                         {
                            duration: 500,
                            step: function() {

                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });
            }
         });
    });
});

Answer 1

replace your box_1_sec with

$("#"+clicked_id+"_sec")

this will do the trick