CODEWITHSUNDEEP
jquerycss
Cybercampbell
Cybercampbell

Reputation: 2606

jQuery Toggle class with an ALL selector

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

Upvotes: 2

Views: 390

Answers (3)

Law Metzler
Law Metzler

Reputation: 1235

try

<div class="my-menu">
  <ul class="menu">
    <li class="tagSelected all"> <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>



$('.my-menu ul.menu li').click(function () {
    if($(this).hasClass('all')){
         $(this).siblings('li').removeClass('itemSelect');
         $(this).addClass("itemSelect");
    }
    else {
         $(this).siblings('li.all').removeClass('itemSelect');
         $(this).toggleClass("itemSelect");
    }
});

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6965

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/

Upvotes: 1

bevacqua
bevacqua

Reputation: 48516

$('.my-menu ul.menu li').click(function () {
    if(this.rel === "All") {
        $('.my-menu ul.menu li').removeClass("itemSelect");
    }else{
        $(this).toggleClass("itemSelect");
    }
});

Upvotes: 0

Related Questions