bodovix bodovix - 1 month ago 4
Javascript Question

how to loop .attr() change on click?

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

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.