Jquery toggle multiple buttons

Question

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/

Answer 1

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