Icon does not change when div is collapsed and expanded

Question

Once the button or the "caret-down" icon is clicked, it will expand and the content will be shown. At the same time, the icon in the button will change to "minus" icon but it doesn't seem to work. Here's the code.

  $('#demo').on('shown.bs.collapse', function() { var getID = $(this).attr("id"); getID = $("#toggle-" + getID); $(getID).toggleClass("fa-caret-down fa-minus") }); $('#demo').on('hidden.bs.collapse', function() { var getID = $(this).attr("id"); getID = $("#toggle-" + getID); $(getID).toggleClass("fa-minus fa-caret-down"); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="../../css/register-dev.css"> <link rel="stylesheet" href="../../css/activity-registration.css"> <!-- jQuery first, then Tether, then Bootstrap JS. --> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col"> <button class="btn btn-light btn-lg" type="button" data-toggle="collapse" data-target="#demo">Detail <span><i id="toggle-demo" class="fa fa-caret-down" aria-hidden="true"></i></span> </button> </div> </div> </div> <div id="demo" class="collapse in">Some dummy text in here.</div> 

Answer 1

Since your button isnt a parent of the div you cant use parent() method, and you are doing wrong removing and adding same class at the same line, you also can work with toggleClass() . The proper way to do it would be next:

 $('#demo').on('shown.bs.collapse', function () { console.log("Opened") $('button[data-target="#demo"] > span > i.fa').toggleClass("fa-caret-down fa-minus") }); $('#demo').on('hidden.bs.collapse', function () { console.log("Closed") $('button[data-target="#demo"] > span > i.fa').toggleClass("fa-minus fa-caret-down") }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <button class="btn btn-light btn-lg" type="button" data-toggle="collapse" data-target="#demo"> Detail <span> <i class="fa fa-caret-down" aria-hidden="true"></i> </span> </button> <div id="demo" class="collapse">Some dummy text in here.</div> 

Note: You also can use next selector in combination with find() method if you prefer:

$('button[data-target="#demo"]').find("i.fa").toggleClass("fa-caret-down fa-minus")

Answer 2

Updated Snippet

I would prefer to do it with IDs . Give an id i tag. I know there are many ways to do. But with the solution below. you will get good performance. because it will target the id not scanning the element from DOM

 $('.collapse').on('shown.bs.collapse', function() { var getID = $(this).attr("id"); getID = $("#toggle-" + getID); $(getID).toggleClass("fa-caret-down fa-minus") }).on('hidden.bs.collapse', function() { var getID = $(this).attr("id"); getID = $("#toggle-" + getID); $(getID).toggleClass("fa-minus fa-caret-down"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col"> <button class="btn btn-light btn-lg" type="button" data-toggle="collapse" data-target="#demo">Detail <span><i id="toggle-demo" class="fa fa-caret-down" aria-hidden="true"></i></span> </button> </div> </div> </div> <div id="demo" class="col collapse in">Some dummy text in here.</div> <br> <div class="col"> <button class="btn btn-light btn-lg" type="button" data-toggle="collapse" data-target="#demo2">Detail <span><i id="toggle-demo2" class="fa fa-caret-down" aria-hidden="true"></i></span> </button> </div> <div id="demo2" class="col collapse in">Some dummy text in here.</div>