Question

I have a menu and I need to toggle the class which is easy enough but I’m stuck on one feature i need to have… I will explain my issue:

I have this list menu <li>:

[ALL][ITEM 1][ITEM 2][ITEM 3][ITEM 4][ITEM 5][ITEM 6]

When I select any [ITEM] it toggles the class itemSelect and unselects [ALL] (be removing the class itemSelect from [ALL])

If I select [ALL] it removes itemSelect from all apart from [ALL]

this is all I have so far:

$('.my-menu ul.menu li').click(function () {
     $(this).toggleClass("itemSelect");
});

if it helps here is the HTML:

<div class="my-menu">
  <ul class="menu">
    <li class="tagSelected"> <a rel="All" href="#">ALL</a></li>
    <li class=""> <a href="#" rel="1">ITEM 1</a> </li>
    <li class=""> <a href="#" rel="2">ITEM 2</a> </li>
    <li class=""> <a href="#" rel="3">ITEM 3</a> </li>
    <li class=""> <a href="#" rel="4">ITEM 4</a> </li>
    <li class=""> <a href="#" rel="5">ITEM 5</a> </li>
    <li class=""> <a href="#" rel="6">ITEM 6</a> </li>
  </ul>
</div>

Any help with this will be much appreciated.

C

Answer 1

Try this jsFiddle http://jsfiddle.net/FWtQf/2/. I think this is what you are looking for.

Edit

updated jsfiddle http://jsfiddle.net/FWtQf/3/

update again http://jsfiddle.net/FWtQf/4/