CODEWITHSUNDEEP
jqueryhtmlcss
Luca Belletti
Luca Belletti

Reputation: 103

If I click another class, remove "Active"

I have an element with the "gmnprint" class when I click on it, adding the "active" class but when I click another element it remains.

html 

<div class="gmnoprint" title="S.A.U.C." style="width: 22px; height: 35px; overflow: hidden; position: absolute; opacity: 0.01; cursor: pointer; touch-action: none; left: -294px; top: 45px; z-index: 80;"></div>
<div class="gmnoprint" title="INC." style="width: 22px; height: 35px; overflow: hidden; position: absolute; opacity: 0.01; cursor: pointer; touch-action: none; left: -288px; top: -116px; z-index: -81;"></div>

jQuery

$(document).ready(function() {
  $('.gmnoprint').click(function() {
    $(this).toggleClass("active");
  });  
});

Upvotes: 1

Views: 191

Answers (5)

DreamTeK
DreamTeK

Reputation: 34197

$(function() {
  $('.gmnoprint').on('click', function() {
    $('.gmnoprint').removeClass('active');
    $(this).toggleClass("active");
  });
  
});
.active {
  color: #b00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="gmnoprint" title="S.A.U.C.">Click Me</div>

<div class="gmnoprint" title="INC.">Click Me Too</div>

Upvotes: 1

epanalepsis
epanalepsis

Reputation: 935

You could remove the class from all elements and re-apply it on the clicked one. 

 $(document).ready(function() {
      $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass("active");
        $(this).addClass("active");
      });  
 });

Fiddle:

https://codepen.io/anon/pen/Xxboxz

Upvotes: 0

Schleis
Schleis

Reputation: 43700

In your click handler, you are only toggling the element that is being clicked. You also need to reset the rest of the elements on the page.

$(document).ready(function() {
    $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass('active');
        $(this).toggleClass("active");
    });  
    });

Any other elements will have the class removed as well as toggling the element that was clicked.

Upvotes: 0

Arup Rakshit
Arup Rakshit

Reputation: 118271

First remove the class from all mathing elements, and then set the active class on which click is happened.

$(document).ready(function() {
  var $gmnoprint = $('.gmnoprint');
  $gmnoprint.click(function() {
    $gmnoprint.removeClass('active');
    $(this).addClass("active");
  });
});
.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gmnoprint" title="S.A.U.C." style="width: 50px; height: 35px;">Box I</div>
<div class="gmnoprint" title="INC." style="width: 50px; height: 35px;">Box II</div>

Upvotes: 1

bassxzero
bassxzero

Reputation: 5041

Instead of toggling, add and remove the classes explicitly. 

 $(document).ready(function() {
    $('.gmnoprint').click(function() {
        $('.gmnoprint').removeClass('active');
        $(this).addClass("active");
    });  
    });

Upvotes: 3

Related Questions