how to loop .attr() change on click?

Question

So i've been stuck for a while..

I'm trying to set up a system where the user has 3 buttons, each button brings up 1 of 3 divs. there is a check and the window thats currently open's corresponding button changes its class to change its background-color - so its easy to see what option is open.

then clicking a different button loads different content but keeps the window open - this works

clicking the same button twice closes the window and re sets button class- this works

this should be able to repeat - but it wont..

I can load the corresponding window, change its buttons class. close that window and reset the class to its original state, but when I try to open the same window again the class wont change again. it won't repeat this process..

unless you re open a different window in which case it re starts its self and works until that same point...

Super confused and cant see whats going on here..

Any help appreciated!!

$(document).ready(function(){ 
    $('#findUs').click(function(){

        if($('.findUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#findUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#findUs').attr('class','selectedContact');
                    $('#phoneUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');


        $('.infoDropdown').load('global/contactOptions.php .findUs',{},function(){

            if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");
                }

                });

            });


//------------------------------------phone------------------------------------------
    $('#phoneUs').click(function(){

            if($('.phoneUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#phoneUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle('slow');
                return false;
        }
                    $('#phoneUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#faxUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .phoneUs',{},function(){

                if($('.infoDropdown').is(':hidden')){
                    $('.infoDropdown').slideToggle("slow");

                }
                });
        });
//------------------------------------Fax--------------------------------------------
    $('#faxUs').click(function(){

            if($('.faxUs').length){  //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button-----
                    $('#faxUs').attr('class','contactTitle');
                $('.infoDropdown').slideToggle("slow");
                return false;
        }
                    $('#faxUs').attr('class','selectedContact');
                    $('#findUs').attr('class','contactTitle');
                    $('#phoneUs').attr('class','contactTitle');

            $('.infoDropdown').load('global/contactOptions.php .faxUs',{},function(){

                if($('.infoDropdown').is(":hidden")){
                    $('.infoDropdown').slideToggle("slow");

                }
        });
    });

});

===========================the main html=====================================

 <div align="center" >
            <span class="contactTitle" id="findUs">Find Us:</span>
            <span class="contactTitle" id="phoneUs">Phone Us:</span>
            <span class="contactTitle" id="faxUs">Fax Us:</span>
        </div>

        <div class="infoDropdown">
        </div>

==========================divs loaded from seporate page==============================

    <div class="findUs" name="findUs">
dfgdfg
        </div>

        <div  class="phoneUs" name="phoneUs">
        test
        </div>


        <div  class="faxUs" name="faxUs">
        123
        </div>

=====================================CSS========================================

<style>
.infoDropdown{
    display:none;
    height:250px;
    margin-top:5px;
    background-color:rgba(33,252,0,1.00);
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
}
.contactTitle{  
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:green;
    margin-top:5px;
    align-items:center;

}
.selectedContact{
    width:33%;
    font-weight:bold;
    text-align:center;
    border-radius:5px;
    display:inline-block;
    font-size:30px;
    background-color:rgba(33,252,0,1.00);
    margin-top:5px;
    align-items:center; 
}
</style>

Answer 1

After you have loaded your contents once with ajax, this check is always true: if($('.findUs').length) And because of that you return false before ever reaching the part of your code where you change the buttons' classes.