CODEWITHSUNDEEP
jquerytoggle
ThomasCS
ThomasCS

Reputation: 717

Jquery toggle multiple buttons

I have multiple buttons, that get their active css style with a jquery toggle script. But I want to have only one button at a time active. But also, when I re-click an active button, it has to become unactive.

$(document).ready(function(){
    $('.button').click(function() {       
        $(this).toggleClass('buttonactive');
    });
});

Basicly I need to add a line saying:

$(all .button except this).removeClass('buttonactive');

I don't know how. Can someone help me? Here's a JSFIDDLE with the problem: http://jsfiddle.net/nV5Tu/3/

Upvotes: 6

Views: 13448

Answers (4)

Dean
Dean

Reputation: 6354

This should do the trick:

$(document).ready(function(){
    $('.button').click(function() {
        if($(this).hasClass("buttonactive")) {       
            $(this).removeClass('buttonactive');
        } else {
            $(this).addClass('buttonactive');
        }
        $(".button").removeClass("buttonactive"); // removes all other active classes
    });
});

Upvotes: 1

wirey00
wirey00

Reputation: 33661

You can do it like this using .toggleClass() to toggle current element.. then using .not() to filter out current element from having class removed

$('.button').click(function() {  
    $('.button').not(this).removeClass('buttonactive'); // remove buttonactive from the others
    $(this).toggleClass('buttonactive'); // toggle current clicked element
});

FIDDLE

Upvotes: 9

bipen
bipen

Reputation: 36531

you don't need three document.ready(function().. one is enough ... 

$('.button').click(function() { 
 $(".button").removeClass("buttonactive");  // remove the class for all button on click
});

fiddle here

Upvotes: 0

Ravi Y
Ravi Y

Reputation: 4376

Why dont you simply remove for all and just add for this ?

$('.button').click(function() {       
    $('.button').removeClass('buttonactive');    
    $(this).addClass('buttonactive');
});

Upvotes: 1

Related Questions