[Solved] jquery toggle with 2 div

[mee]

Hi

I’fe got a strange behavior. I use a toggle function with jquery for that I’ve got two layers which should only show one at the time. Since I don’t have the space on the page I want to show only one at the time. So I made an if/else within the toggle function.
That works, but when I close one of the layer and I click on the link again, both layers are showing …

Code:

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: ‘toggle’}, 500, easing, callback);
};

$(document).ready(function() {

var layer1 = ‘off’;
var layer2 = ‘off’;

$(“a.cv1”).click(function() {
if (layer1 == “on”) {
$(“#cv layer1”).fadeToggle();
setTimeout (function() {
$(“#cvlayer2”).fadeToggle();
}, 510);
layer1 = ‘off’;
layer2 = ‘on’;
} else {
$(“#clayer2”).fadeToggle();
layer1 = ‘off’;
layer2 = ‘on’;
}
});

$(“a.cv2”).click(function() {
if (layer2 == “on”) {
$(“#cvlayer2”).fadeToggle();
setTimeout (function() {
$(“#cv layer1”).fadeToggle();
}, 510);
layer1 = ‘on’;
layer2 = ‘off’;
} else {
$(“#cv layer1”).fadeToggle();
layer1 = ‘on’;
layer2 = ‘off’;
}
});

});

Can some one help me to fix that?
Thanx

[mee]

I’m relay stuck and I can’t find a solution. Any ideas?
Or should I built it completely different?

[mee]

Well I got layer1the solution. I need more statements for the if/else condition.
It’s working like this:

Code:

var layer1 = ‘off’;
var layer2 = ‘off’;

$(“a.cv1”).click(function() {
if (layer1 == ‘on’ && layer2 == ‘off’) {
$(“#cvlayer1”).fadeToggle();
setTimeout (function() {
$(“#cvlayer2”).fadeToggle();
}, 510);
layer1 = ‘off’;
layer2 = ‘on’;
} else if (layer1 == ‘off’ && layer2 == ‘on’) {
$(“#cvlayer2”).fadeToggle();
layer1 = ‘off’;
layer2 = ‘off’;
} else if (layer1 == ‘off’ && layer2 == ‘off’) {
$(“#cvlayer2”).fadeToggle();
layer1 = ‘off’;
layer2 = ‘on’;
}
});

$(“a.cv2”).click(function() {
if (layer2 == ‘on’ && layer1 == ‘off’) {
$(“#cvlayer2”).fadeToggle();
setTimeout (function() {
$(“#cvlayer1”).fadeToggle();
}, 510);
layer1 = ‘on’;
layer2 = ‘off’;
} else if (layer2 == ‘off’ && layer1 == ‘on’) {
$(“#cvlayer1”).fadeToggle();
layer1 = ‘off’;
layer2 = ‘off’;
} else if (layer2 == ‘off’ && layer1 == ‘off’) {
$(“#cvlayer1”).fadeToggle();
layer1 = ‘on’;
layer2 = ‘off’;
}

[Author]

Posts