CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dreams
Dreams

Reputation: 8506

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

$(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?

Upvotes: 3

Views: 964

Answers (6)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

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');
  });
});

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

$(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>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

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>

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

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>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

Remove the class of clicked from all the other sibling divs.

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>

Upvotes: 1

TheGr8_Nik
TheGr8_Nik

Reputation: 3200

You can do:

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

Upvotes: 0

Related Questions