Question

I have some divs (#div1, #div2, #div3) that change appearence on click, they toggle a class using this script:

$(document).ready(function() {
    $("#parent_div").on('click', '.current_class', function () {
        $(this).toggleClass("new_class");
    });
});

Now I want the the divs to be unable to toggle at the same time, so they work kinda like a radio-button with same "name".

Example: Imagine three divs that looks the same (default class), then you click on one of the divs (example #div1) and that one toggles a new class and change appearence. Now you click on one of the other two and this one also change appearence (toggle class), at the same time when this one change appearence #div1 changes back to the default class.

So there can only be one div of those three that toggles the new class at once.

Is this possible?

Answer 1

You first need to remove the class from all the divs, and then add it to the current one. Try this:

$("#parent_div").on('click', '.current_class', function () {
    $('#parent_div .new_class').removeClass('new_class'); // remove exisiting
    $(this).addClass("new_class"); // add to current
});

Update

Added functionality to remove class from current:

$("#parent_div").on('click', '.current_class', function () {
    var $this = $(this);
    if (!$this.hasClass('new_class')) {
        $('#parent_div .new_class').removeClass('new_class');
        $this.addClass("new_class");
    }
    else {
        $this.removeClass("new_class");
    }
});