How to add and remove active class to elements that are not siblings? (jQuery traversing)

Question

I have this code of 4 buttons with the first one has class "active". I want to remove class "active" and add it to other buttons when clicking using jQuery traversing.

https://jsfiddle.net/f93v47dh/

 <div class="row">
    <div class="col-12">
      <button type="button" class="btn active shadow-none" id="item-">item 1</button>
      <button type="button" id="item-2" class="btn shadow-none">item 2</button>
    </div>

    <div class="col-12">
      <button type="button" id="item-3" class="btn shadow-none">item 3</button>
      <button type="button" id="item-4" class="btn shadow-none">item 4</button>
    </div>
  </div>

Other than that, something like `$('.btn.shadow-none.active').removeClass('active')` should work fine — Taplar, Sep 23 '19 at 22:28

mulsun · Accepted Answer · 2019-09-23T22:35:18.943

1

You can use jQuery toggleClass api, and then remove the active class from siblings:

$(this).toggleClass('active').siblings().removeClass('active');

https://jsfiddle.net/g4rsfyzt/

Not direct siblings example:

$('button').removeClass('active');
$(this).addClass('active');

https://jsfiddle.net/2v0edkqj/

edited Sep 23 '19 at 22:35

answered Sep 23 '19 at 22:32

mulsun

563
5
15

Thanks a lot. It worked. – Momo Sep 23 '19 at 22:42

How to add and remove active class to elements that are not siblings? (jQuery traversing)

1 Answers1