Jquery Use toggle class with two elements

Question

I need a little tip here to solve this:

I have 6 buttons that, when user clicks on it, a 'data bar' fills up. This is done by changing the height of that databar div.

If user clicks on button1 or 2 -> Databar changes to small
If user clicks on button 3 or 4 -> Databar fills up to medium
If user clicks on 5 or 6 -> Databar fills to large

The problem is: I cannot use toggleClass to toggle the div to different height. Because with using toggle class method this will happen: If user clicks on button 1, the div will be correctly changed to 'small'. However if user also clicks button 2, the class will be removed of course. I would like the user to be able to click button 1 and 2, so that the div changes to 'small' class. However if user UNCLICKS button 1 AND 2...The 'small' class should be removed.

The same also applies for the rest of the buttons. So if user UNCLICKS both 3 and 4, the 'medium' class should me removed so that the div height goes back to zero, small or whatever other buttons are clicked.

I have created a fiddle to illustrate what i want: http://jsfiddle.net/NvdB31/M6jGJ/1/

Answer 1

You should check whether or not one of the buttons is clicked and has the class button_clicked. Knowing this, you can then use toggleClass after all.

Change your JavaScript to the following:

$(".button1, .button2").click(function() {
    $(this).toggleClass("button_clicked");
    var show = $(".button1, .button2").hasClass("button_clicked");
    $(".databar").toggleClass("databar_small", show);
});

$(".button3, .button4").click(function() {   
    $(this).toggleClass("button_clicked");
    var show = $(".button3, .button4").hasClass("button_clicked");
    $(".databar").toggleClass("databar_medium", show);
});

$(".button5, .button6").click(function() {
    $(this).toggleClass("button_clicked");
    var show = $(".button5, .button6").hasClass("button_clicked");
    $(".databar").toggleClass("databar_large", show);
});

Update of your JSFiddle.

Edit: As a bonus I've updated the JSFiddle once again, to be using less JavaScript and making use of just one button class instead of 6.