Reputation: 543
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
Reputation: 868
<script type="text/javascript">
$('.acc-trigger').click(function() { // when a .myDiv is clicked
$(this).toggleClass('active')
})
</script>
Upvotes: 0
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