treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

[Solved] jquery toggle with 2 div

  • mee
    Permalink to comment #
    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 …
    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
    Permalink to comment #
    I'm relay stuck and I can't find a solution. Any ideas?
    Or should I built it completely different?
  • mee
    Permalink to comment #
    Well I got layer1the solution. I need more statements for the if/else condition.
    It's working like this:
    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';
    				}
Add a Comment