CODEWITHSUNDEEP
javascriptjquery
Arkady
Arkady

Reputation: 393

jquery list item class toggle

I have a simple function to toggle list item class from "active" to "inactive". What is the most efficient way (i.e., using the least amount of code) to set all other list items to "inactive" so that there can only be one "active" list item? Please see below for an example. Thank you

<ul class="menu">
    <li id="one" class="active">One</li>
    <li id="two" class="inactive">Two</li>
    <li id="three" class="inactive">Three</li>
    <li id="four" class="inactive">Four</li>
    <li id="five" class="inactive">Five</li>
</ul>

<script>
    $('#one').click(function () {
        if ($(this).hasClass("inactive")) {
            $(this).removeClass("inactive").addClass("active");
        } else {
            $(this).removeClass("active").addClass("inactive");
        }
    });
</script>

Upvotes: 1

Views: 14541

Answers (5)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

This can work:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active').addClass('inactive');
    $(this).addClass('active').removeClass('inactive');
});

or

$('.menu li').click(function () {
    $('.menu li').removeClass('active').addClass('inactive');
    $(this).toggleClass('active inactive');
});

The second method is shorter, but slower.

http://jsperf.com/toggle-vs-add-remove

Edit: This one is shorter and faster:

$('.menu li').click(function () {
    $('.menu li').not(this).removeClass('active');
    $(this).addClass('active');
});

If performance is really a problem you can store your menu in a variable and perform operations on this variable, like:

var $menu = $('.menu li');
$menu.click(function () {
        $menu.not(this).removeClass('active');
        $(this).addClass('active');
    });

Upvotes: 11

John Horstman
John Horstman

Reputation: 66

If you're already using jQuery UI, you can take advantage of the selectable function. That would get you what you want with the least amount of code. http://jqueryui.com/selectable/

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

For brevity:

$('ul.menu li').click(function () {
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});

JS Fiddle demo (127 characters, whitespace-removed character-count: 115).

Character-counts at JS Fiddle, since brevity was the intent, it seems.

Unfortunately, given the problem identified in the comments, below, a corrected implementation is somewhat more verbose than the (currently-accepted answer), alternatives being:

$('ul.menu li').click(function () {
    var t = this;
    $(this).siblings().add(t).attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle demo (174 characters, whitespace-removed character-count: 133).

Or:

$('ul.menu li').click(function () {
    var t = this;
    $(this).parent().children().attr('class', function (){
        return t === this ? 'active' : 'inactive';
    });
});

JS Fiddle demo (176 characters, whitespace-removed character-count: 135).

Of course, white space-removed jQuery does become somewhat unreadable, but still: I claim the, uh, moral victory...

References:

Upvotes: 1

glautrou
glautrou

Reputation: 3198

If SEO is not important and to use the less amount of code I would say use a radio-button list. Then you can style and interact in JavaScript by using the ":checked" selector.

Upvotes: 0

Dan
Dan

Reputation: 8784

$('ul li').click(function() {
    $('ul li').each(function() {
       $(this).removeClass('active'); 
    });
    $(this).addClass('active');  
});

JSFiddle

Upvotes: 0

Related Questions