After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly.
To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), but the issue still persisted. You can view the updated example below:
Code:
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
$(".toggle-trigger").click(function() {
$(this).parent().nextAll('.toggle-wrap').first().slideToggle('slow','swing');
if( $(this).is("menu2 .headline a")) {
$(this).toggle(
function(){
$(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #009e0f');
$(this).css("color","#009e0f");
},
function(){
$(this).parent().css("background-color","#009e0f","border",'solid 2px #009e0f');
$(this).css("color","#ffffff");
}
);
}
else if( $(this).is("#menu3 .headline a")) {
$(this).toggle(
function(){
$(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #f7b50c');
$(this).css("color","#f7b50c");
},
function(){
$(this).parent().css("background-color","#009e0f","border",'solid 2px #f7b50c');
$(this).css("color","#ffffff");
}
);
}
});
});
});