Grow your CSS skills. Land your dream job.

[Solved] jquery toggle with 2 div

  • mee
    # November 30, 2009 at 4:22 am

    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
    # December 3, 2009 at 6:55 am

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

    mee
    # December 4, 2009 at 4:31 am

    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';
    }

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".