Bootstrap 4 通过 javascript 折叠

Question

I have a bootstrap 4 page set up with collapsible accordion table. Each has a fa-plus-circle icon. When a user clicks on this button, that icon change into fa-minus-circle icon after that i clicked minus-circle icon or button definitely not turn into plus-circle icon. Plss help!

<link rel="stylesheet" href="../../assets/css/bs/bootstrap.css">
      <link rel="stylesheet" href="../../assets/css/custom/custom.css">
      <link rel="stylesheet" href="../../assets/css/bs/bootstrap.min.css">
      <link rel="shortcut icon" href="../../assets/img/logo/logoCircle.png" type="image/x-icon">
      <link rel="stylesheet" href="../../assets/css/fontawesome/all.css">
      <link rel="stylesheet" href="../../assets/css/animate/animate.css">
 <script type="text/javascript">
                 toggleCircle = function(e) {
                  if ($(e.children).attr("class").includes('down')) {
                    $(e.children).removeClass("fa-minus-circle");
                    $(e.children).addClass("fa-plus-circle");
                  } else {
                    $(e.children).removeClass("fa-plus-circle");
                    $(e.children).addClass("fa-minus-circle");
                  }

                }
                      </script>
    <div class="container">
     <div class="row">
    <div class="accordion col-12" id="accordionExample">
        <div class="card">
            <div class="card-header bg-light" id="headingOne">
              <h2 class="mb-0">
        <button class="btn  text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="toggleCircle(this)" >
          <span class="fa fa-plus-circle"></span>
          &nbsp;&nbsp;
          How do I recover my account? &nbsp;
        </button>
              </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                <span>Were sorry to hear that! If you can't sign in to your Pandayan EGC Account.<br><br>

                            To reset your password:<br>
                              1. Go to the login page and you see the forgot your password and click that. Enter your email address click proceed.<br>
                              2. Once you click the proceed button go to your gmail account and there's an email. <br>
                              3. After that you create new password and click save changes. <br>  
                 </span>
              </div>
            </div>
          </div>
        </div>
</div>
</div>
<script src="../../assets/js/jquery/jquery-3.3.1.js"></script>
      <script src="../../assets/js/popper/popper.min.js"></script>
      <script src="../../assets/js/bs/bootstrap.min.js"></script>
      <script src="../../assets/js/fontawesome/all.js"></script>
      <script src="../../assets/js/backstretch/backstretch.js"></script>
      <script src="../../assets/js/backstretch/backstretchSettings01.js"></script>
      <script src="../../assets/js/bsn/bootstrap-notify.min.js"></script>
      <script src="../../assets/js/general/loader.js"></script>
      <script src="../../assets/js/general/login.js"></script>
      <script src="../../assets/js/general/forgotpassword.js"></script>
      <script src="../../assets/js/general/accountregister.js"></script>

Answer 1

Urge to say you don't need any JS at all ! Just one line of CSS

 .collapsed .fas:before { content: "\\f055"; /* https://fontawesome.com/cheatsheet */ }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <button class="btn text-dark collapsed" type="button " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <span class="fas fa-minus-circle"></span> How do I recover my account? </button> <div id="collapseOne" class="collapse">OU YEAH</div> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

And, logically, use <span class="fas fa-minus-circle"></span> if you start collapsed.

---

To explain, Bootstrap already danymically toggles the collapsed button class. So all the above does, is target that class using CSS, find the .fas icon and change it to the needed one.