JSFiddle - React, Tailwind, and code Playground

HTML

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


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

CSS

.hide{
     display:none;   
}

.light_button{
    background-color: #CCC;
    color: #000;
}

.dark_button{
    background-color: #333;
    color: #FFF   
}

JavaScript

var $j = jQuery.noConflict();

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