Question

Here is jsfiddle !

I am trying to make user page where he can switch between pages by clicking on div’s. Problem is, I will need more then 3 div’s , and this already is very messy…

<div id="dviOverdivWraper">
    <div class="containterBox">
        <div id="leftOver" style="background-color:blue">
        </div>
        <div id="rightOver" style="background-color:red">
        </div>
        <div id="thirdOver" style="background-color:yellow">
        </div>
    </div>
</div>

#dviOverdivWraper {
    width: 800px;
    height: 400px;
    margin: 0px auto;
    top: 200px;
    text-align:center;
}
#dviOverdivWraper .containerBox{
    width: 800px;
    height: 400px;
    margin: 0px auto;
    text-align:center;
}
#leftOver{
    width: 400px;
    height: 200px;
    float: left;
}
#rightOver, #thirdOver{
    width: 50px;
    height: 200px;
    float: left;
}

$("#rightOver").click(function () {
    $("#leftOver").animate({
        width: "50px"
    }, 500, null);
    $("#rightOver").animate({
        width: "400px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "50px"
    }, 500, null);
});
$("#leftOver").click(function () {
    $("#rightOver").animate({
        width: "50px"
    }, 500, null);
    $("#leftOver").animate({
        width: "400px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "50px"
    }, 500, null);
});
$("#thirdOver").click(function () {
    $("#rightOver").animate({
        width: "50px"
    }, 500, null);
    $("#leftOver").animate({
        width: "50px"
    }, 500, null);
    $("#thirdOver").animate({
        width: "400px"
    }, 500, null);
});

How can I optimize it, because I will need more then 3 div’s?

Answer 1

jsFiddle DEMO

    // SET MIN WIDTH:
    var minW = 50;
    // SET MAX WIDTH:
    var maxW = 400;
    // SET INITIALLY OPENED BOX:
    var openBox = 1;
    // SET ANIMATION SPEED (in milliseconds)
    var speed = 400;
    //////////////////////
      
$('.box').eq(openBox-1).width(maxW).siblings().width(minW); // initial setup

function animate(){
   $('.box').eq(openBox).stop().animate({width: maxW},speed).siblings().animate({width: minW},speed);            
}
    
$('.box').on('click', function(){
   openBox = $(this).index();
   animate();                    
});

P.S: I just added a class .box to your elements.