How to add active and remove existing active class collapse on bootsrap 4

Question

Someone please help me, how to add "active" class after "careers-menu-container" class and remove existing another active class when click button(a)?. please check my code below!.

Thanks a lot off.

 <div class="container" id="myCollapse"> <div class="col-sm-12 col-md-4 order-sm-1 order-md-1"> <div class="careers-menu-container careers-menu-container__img1"> <a data-toggle="collapse" href="#collapseExtension1" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i> </a> </div> </div> <div class="collapse" id="collapseExtension1" data-parent="#myCollapse"> <p>lorem ipsum</p> </div> <div class="col-sm-12 col-md-4 order-sm-3 order-md-2"> <div class="careers-menu-container careers-menu-container__img1"> <a data-toggle="collapse" href="#collapseExtension2" role="button" aria-expanded="false" aria-controls="collapseExtension">APPLY NOW <i class="fas fa-caret-right"></i> </a> </div> </div> <div class="collapse" id="collapseExtension2" data-parent="#myCollapse"> <p>lorem ipsum</p> </div> </div> 

 $(".collapse.show").each(function(){ // show active class here }); // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(){ // show active class and remove another active class }).on('hide.bs.collapse', function(){ // remove class here and show another active class }); 

Answer 1

You can access .careers-menu-container via .collapse using .parent() :

$(".collapse").on('show.bs.collapse', function(){
  $(this).parent().addClass('active')
}).on('hide.bs.collapse', function(){
  $(this).parent().removeClass('active')
});