2

Lets say I have list like this...

<ul>
  <li class="one">One</li>
  <li class="two">Two</li>
  <li class="three">Three</li>
</ul>

...and I want to be able to toggle class in the li's...

$( "li" ).click(function() {
    $( "li" ).toggleClass( "active" );
});

..also I want the li's except the one that was clicked to never show as '.active' while still maintaining the toggleClass ability in the '.active' li

So I was thinking maybe I want to removeClass from any other li's except the one what was clicked. I don't know how I could do that though...

Any ideas on how to achieve something like that? I'm sure its rather easy but I have no idea as I'm very new to jQuery

Solved - If someone wants to see it.. there we go: http://jsfiddle.net/6jm2s/17/ also this one... http://jsfiddle.net/6jm2s/18/

Both answers work perfectly.. @jondavidjohn & @hunter Thank you guys... too bad I can't put Checkmark on both answers... but I will let hunter have it as his code is shorter.. :)

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Joonas
  • 7,227
  • 9
  • 40
  • 65

2 Answers2

11

Make it so that once something is active, one will always be active:

$("li:not(.active)").live("click", function() {
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
});

focuses only on li's that aren't already active.

To be able to deactivate:

$("li").click(function() {
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active");
});

working example: http://jsfiddle.net/6jm2s/18/

hunter
  • 62,308
  • 19
  • 113
  • 113
5
$( "li" ).click( function() {
    if( $(this).is('.active') ) {
        $(this).removeClass( "active" );
    }
    else {
        $( "li.active" ).removeClass( "active" );
        $(this).addClass( "active" );
    }
});
jondavidjohn
  • 61,812
  • 21
  • 118
  • 158
  • 2
    Maybe even better: `$("li.active").removeClass( "active" );` – Felix Kling Feb 04 '11 at 18:33
  • I like mine better because it's mine. +1 – hunter Feb 04 '11 at 18:37
  • 1
    @jondavidjohn Well this is more or less what i already have. That code always make sure that there is .active in the clicked element and so, when you click li that is active it will remove .active first and then add .active again so i cant toggle it away.. which was also the point of this.. – Joonas Feb 04 '11 at 19:18
  • edited answer to define click events for only elements that are not `.active` – jondavidjohn Feb 04 '11 at 19:25
  • @user603568 Not sure what you are trying to accomplish, I assume you are trying to, 'on click', 1) add `.active` class to clicked elements and 2) remove the active class from elements that have not been clicked. correct? – jondavidjohn Feb 04 '11 at 19:27
  • @jondavidjohn Yes, and thats what is being achieved right now.. but i also want the ability remove '.active' from clicked '.active' li ...i guess i wasnt being super clear about that.. – Joonas Feb 04 '11 at 19:35
  • @jondavidjohn Thats great... Thanks! I had a feeling if and else might do the trick but i dont know how to use them :) Heres the 'demo' for anyone whos interested: http://jsfiddle.net/6jm2s/17/ – Joonas Feb 04 '11 at 19:54