CODEWITHSUNDEEP
jquery
alexkodr
alexkodr

Reputation: 543

Remove class from other divs on click and also toggle class

I have multiple divs on click i want to add class 'active' and when i click another div i want it to add class 'active' to the div i've just clicked and also remove class 'active' from the previous div. I've got this working fine.

What i also need to be able to do is also remove class 'active' if i click on the currently active div i.e. a toggleclass. I've tried to encorporate toggleClass into my jquery but it doesn't work. Any ideas?

Here's my js

$('.myDiv').click(function(){
    $('.myDiv.active').removeClass('active').addClass('not-active');
    $(this).removeClass('not-active').addClass('active'); 
})

Here's a working fiddle: https://jsfiddle.net/alexgomy/tfucru6z/3/

Upvotes: 1

Views: 10690

Answers (2)

Nazmul Haque
Nazmul Haque

Reputation: 868

<script type="text/javascript">
  $('.acc-trigger').click(function() { // when a .myDiv is clicked

    $(this).toggleClass('active')
  })
</script>

Upvotes: 0

j08691
j08691

Reputation: 208040

You can use this:

$(function() {
  $('.myDiv').click(function() { // when a .myDiv is clicked
    $('.myDiv').not(this).removeClass('active')
    $(this).toggleClass('active')
  })
})


$(function() {
  $('.myDiv').click(function() { // when a .myDiv is clicked
    $('.myDiv').not(this).removeClass('active')
    $(this).toggleClass('active')
  })
})
.myDiv {
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
  border: 1px solid black;
  text-align: center;
  padding: 30px;
}

.active {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>
<div class="myDiv">Once i have active class if you click me i should remove active class</div>

It works by first removing the active class from all of the divs except from the one being clicked on, and then on that one ($(this)), toggling the class.

Upvotes: 9

Related Questions