How To Make Only One Div Have The Class Clicked At A Time?

This works very fine, but it accepts more than one div with the class 'clicked'. I just want one div on the page with the class 'clicked'. Can anyone help me? Thank you in advance.

Solution 1:

In your click handler:

$('.clicked').removeClass('clicked');
$(this).addClass('clicked');

Solution 2:

There you go. You can simplify your code:

$(function () {
    $('.clicked, .clickable').on('click', function () {
        // Remove clicked class from every element.
        $('.clicked').removeClass('clicked');

        // Hide every element with class content
        $('.content').hide();

        // Toggle between the two available classes, and on the same// go show the sibling element with class content.
        $(this).toggleClass('clickable clicked').next('.content').show();
    });
});

Demo

Solution 3:

It seems all you need to do is remove "clicked" from everything. Just add one line like this:

$(window).load(function() {
    $('.clicked, .clickable').on('click', function(){
        if ($(this).hasClass('clickable')){
            $('.content').hide();
            $(this).next().show();
            $('.clicked').removeClass('clicked'); // ADD THIS LINE
            $(this).removeClass('clickable').addClass('clicked');
        } else {
            $(this).next().hide();
            $(this).removeClass('clicked').addClass('clickable');
        }
    });
});

Solution 4:

I have answered this question to you like 3 hours ago :D https://stackoverflow.com/a/26239480/3637090

http://jsfiddle.net/9owL9u37/

$('.clickable').on('click', function () {
    $('.content').hide();
    if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked');
    } else {
        $(this).next().show();
       $(this).addClass('clicked');
    }
});