CODEWITHSUNDEEP
javascriptjquery
Saeed Abbaspour
Saeed Abbaspour

Reputation: 329

How can I simplify this using Javascript or jQuery?

I have 4 vertical sliding panels and I am using the following code for it. Is there any way I can simplify the code?

$(".sliding-panels").click(function() {
    var n = $(this).attr("number");

    $(".panel" + n).toggleClass("panel-active");

    if (n == 1) {
        $(".panel2").toggleClass("panel-push-right");
        $(".panel3").toggleClass("panel-push-right");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 2) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel3").toggleClass("panel-push-right");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 3) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel2").toggleClass("panel-push-left");
        $(".panel4").toggleClass("panel-push-right");
    }
    else if (n == 4) {
        $(".panel1").toggleClass("panel-push-left");
        $(".panel2").toggleClass("panel-push-left");
        $(".panel3").toggleClass("panel-push-left");

    }
});

Upvotes: 0

Views: 64

Answers (2)

Felix Kling
Felix Kling

Reputation: 816334

This may be a bit of a stretch, but assuming all the elements have the same class (maybe it even is .sliding-panels?) and are in order, i.e.

<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
...

you can do:

var $panels = $(".sliding-panels").click(function() {
    var n = $(this).attr("number") - 1;
    $panels.toggleClass(function(index) {
       return index === n ? 
         'panel-active' : 
         (index < n ? 'panel-push-left' : 'panel-push-right');
    });
});

Let jQuery handle the element traversal.

Upvotes: 1

EyasSH
EyasSH

Reputation: 3769

How about replacing the if statement with:

var i, toggle_class;
for (i = 1; i <= 4; ++i) {
    if (i === n) { toggle_class = "panel-active"; }
    else if (i < n) { toggle_class = "panel-push-left"; }
    else /* i > n */ { toggle_class = "panel-push-right"; }
    $(".panel" + i ).toggleClass(toggle_class);
}

Upvotes: 5

Related Questions