How to only make one div has toggled at one time when using toggle class?

Question

 $(document).ready(function(){ $("#items").children().click(function(){ $(this).toggleClass('clicked'); }); }); 

 .clicked { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 

Now, I can toggleClass to make div become red color when click. But I can still click another div to make it red then I will have two div in red color.

How to only make one div become red at one time?

Answer 1

Use removeClass and not to exclude the current selection:

 $(document).ready(function(){ $("#items").children().click(function(){ $('#items > div').not($(this).toggleClass('clicked')).removeClass('clicked'); }); }); 

 .clicked { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 

A shorter version:

$(document).ready(function(){
  $("#items").children().click(function(){
    $('.clicked').not($(this).toggleClass('clicked')).removeClass('clicked');
  });
});

Answer 2

Try this,

$(document).ready(function(){
    $("#items").children().click(function(){
        $(this).toggleClass('clicked') // toggle class of current element
               .siblings('div') // get siblings of current elem
               .removeClass('clicked'); // remove class clicked from siblings

    });
});

 $(document).ready(function() { $("#items").children().click(function() { $(this).toggleClass('clicked').siblings('div').removeClass('clicked'); }); }); 

 .clicked { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 

Answer 3

Remove the class of clicked from all the other sibling div s.

Use siblings() to select the sibling elements.

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

 $(document).ready(function() { $("#items").children().click(function() { $(this).toggleClass('clicked').siblings('div').removeClass('clicked'); }); }); 

 .clicked { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 

Answer 4

 $(document).ready(function() { $("#items").children().click(function() { $(this) //clicked element .add('.clicked', this.parentNode)//add already '.clicked' child element in jq set .toggleClass('clicked');//toggle class for all elements in set }); }); 

 .clicked { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> 

Answer 5

You can do:

$(document).ready(function(){
  $("#items").children().click(function(){
    $(this).siblings().removeClass('clicked');
    $(this).addClass('clicked');
  });
});

Answer 6

HI now try to this way

$(document).ready(function(){
      $("#items > div").click(function(){
       $("#items").children().removeClass('clicked');
        $(this).addClass('clicked');
      });
    });

 $(document).ready(function(){ $("#items > div").click(function(){ $("#items").children().removeClass('clicked'); $(this).addClass('clicked'); }); }); 

 .clicked { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='items'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>