Home › Forums › JavaScript › [Solved] jquery toggle with 2 div
- This topic is empty.
-
AuthorPosts
-
November 30, 2009 at 4:22 am #26990meeMember
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?
ThanxDecember 3, 2009 at 6:55 am #67431meeMemberI’m relay stuck and I can’t find a solution. Any ideas?
Or should I built it completely different?December 4, 2009 at 4:31 am #67496meeMemberWell 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’;
} -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.