Here's a snippet of my code:
<ul id='nav'>
<li><h1 id='unique' class='title'>Topic</h1></li>
<li><h1 class='toptitle'>Department</h1></li>
<li><a class='title' href='#'>test1</a></li>
<li><h1 class='toptitle'>test2</h1></li>
<li><a class='title' href='#'>test1</a></li>
</ul>
I'm trying to change the background color of the li items when a user clicks on them, but I want to keep the '#unique' item's background unchanged.
This is what I have so far:
$('.title').on('click', function(e){
$(this).closest('ul').find('li').not('#unique').css({'background-color':'white'}) //change all li backgrounds except for the first one
$(this).parent().css({'background-color':'#DDDDDD'})
})
However, my current code doesn't seem to be working as intended. Can someone help me figure out how to change all li backgrounds except for the first one? Thank you!