There is a table and I am using fadeToggle on the list to hide and show the table. The background of the list is green color, but I want to change the list color when hiding the table and revert it back to green when clicking to show the table. Unfortunately, my code is not working as expected.
<div class="main">
<ul class="top_menu" >
<li class="orderList" id="starter_li">Starter</li>
<li class="orderList" id="soup_li"> Soup</li>
<li class="orderList" id="seafood_li">Seafood</li>
<li class="orderList" id="return_li">Return All</li>
</ul>
<div id="middleBox">
<table class="food_table" id="starters" style="width:100%">
<tr></tr>
<tr>
<td>S1</td>
<td>Starter1<br>
<td>10</td>
</tr>
<table class="food_table" id="soups" style="width:100%">
<tr>
<td>1</td>
<td>Soup1</td>
<td>4</td>
</tr>
</table>
<table class="food_table" id="seafood" style="width:100%">
<tr>
<td>2</td>
<td>seafood1</td>
<td>7</td>
</tr>
</table>
jQuery
$(document).ready(function(){
$("#starter_li").click(function(){
$("#starters").fadeToggle(500);
$(this).css("background-color","white");
$(this).css("color","#05FF0A");
});
$("#soup_li").click(function(){
$("#soups").fadeToggle(500);
$(this).css("background-color","white");
$(this).css("color","#05FF0A");
});
$("#seafood_li").click(function(){
$("#seafoods").fadeToggle(500);
$(this).css("background-color","white");
$(this).css("color","#05FF0A");
});
$("#return_li").click(function(){
$(".food_table").fadeIn(500);
});
$('.orderList').click(function(e){
var color = $(this).css('background-color');
if (color == 'white')
$(this).css('background-color','#05FF0A');
});
});