Question

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 be filled out depending on the users choice. They will click one button or the other. When they click the button the form fades in and the button changes classes (goes from a light button to a dark button) Here is were I am running into issues. First I cannot get the form to fade in at all and the buttons will only change classes if I click them twice not once.

One other thing I am not sure how to go about is if I have say form 1 chosen but I meant to click form 2 then I want form one to fade out, form 2 to fade in and the buttons change accordingly. Here is my Code:

JS

<script type="text/javascript">
var $j = jQuery.noConflict();
var $jtest1 = $j('#test1'); 
var $jtest2 = $j('#test2');

$j("#button1").live('click',function(){  
    //Fade out form if shown and fade in form selected
    $jtest2.fadeOut("slow", function(){
         $jtest1.fadeIn("slow");
    });
    $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
});
</script>

HTML

<p class="light_button" id="button1">Test 1 </p>
<p class="light_button" id="button2">Test 2 </p>


<div class="hide" id="test1"><p>TEST</p></div>
<div class="hide" id="test2"><p>TEST 2</p></div>

Note: class="hide" is style="display:none"

Thanks for any help because I am a but stuck and not sure to go about this. Also please give me an example because I do not always follow when someone say change this to that etc.

Answer 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 set
        if(btnA.hasClass('dark_button')){
            return; 
        }

        //see if div is visible, if so hide, than show first div
        if(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