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>

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>

• javascript
• jquery

5 Answers 5

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./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');
    });

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 ments, 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 bee somewhat unreadable, but still: I claim the, uh, moral victory...

References:

• add().
• attr().
• children().
• end().
• siblings().
• toggleClass().

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

JSFiddle

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.

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./selectable/