Question

I have 3 boxes and I want them to switch between them and also toggle off on a second click. Currently it switches between them fine (the IF part), but when I click on the same box to toggle it off if doesn’t work (the “else if” part doesn’t seem to work). I think I need to restructure the if-statement. Any help is greatly appreciated.

Here is the JS fiddle:
http://jsfiddle.net/FFdjS/5/

Here is one of the element’s click if-statement:

box1.click(function() {
    if (box1.attr(strOff)) {
        box1.attr(strOn);
        box2.attr(strOff);
        box3.attr(strOff);
    } else if (box1.attr(strOn)) {
               box1.attr(strOff);
    } else {}
});

Answer 1

Element.attr(...) sets the attribute when object is passed as argument. Returns Element. If you want to toogle it – use something like this:

box1.click(function() {
    if (box1.attr('stroke-width') == 1) {
        box1.attr(strOn);
        box2.attr(strOff);
        box3.attr(strOff);
    } else if (box1.attr('stroke-width') == 5) {
           box1.attr(strOff);
    } else {}
});

Example on jsFiddle