Skip to content Skip to sidebar Skip to footer

Jquery - Changing Styles And Displaying Certain Elements

Well it seems I know enough Javascript to hurt myself so I come asking help from you guys here. Here is what I am attempting to do and my issue. I have two forms and only one will

Solution 1:

Look at the code below, added comments on why

$j("#button1").live('click',function(){  
    //Fade out form if shown and fade in form selected$jtest2.fadeOut("slow", function(){
         $jtest1.fadeIn("slow");  
    });

    //The following is inside the click so I do not get added until the first click //and added after every click so I multiply! //Hence why it takes 2 clicks$j('#button1').live('click', function(){
        //change class from light to dark$j(this).addClass('dark_button').removeClass('light_button');
    }); //I need to change this class to light if// button 2 is selected and change button 2 to dark
});

You should be doing something like this

$j("#button1, #button2").live('click',
    function(){  

        //figure out what button was clicked. if(this.id === "button1"){
            var btnA = $j(this);
            var btnB = $j("#button2");
            var divA = $j('#test1');
            var divB = $j('#test2');
        }
        else{
            btnA = $j(this);
            btnB = $j("#button1");
            divA = $j('#test2');
            divB = $j('#test1');
        }

        //make sure it is not already active, no use to show/hide when it is already setif(btnA.hasClass('dark_button')){
            return; 
        }

        //see if div is visible, if so hide, than show first divif(divB.is(":visible")){        
            divB.fadeOut("slow", function(){
                 divA.fadeIn("slow");
            });
        }
        else{//if already hidden, just show the first div
            divA.fadeIn("slow");            
        }

        //Add and remove classes to the buttons to switch state
        btnA.addClass('dark_button').removeClass('light_button');
        btnB.removeClass('dark_button').addClass('light_button');
    }    
);

jsfiddle example

Post a Comment for "Jquery - Changing Styles And Displaying Certain Elements"