I have created a Bootstrap 4 page with collapsible accordion tables. Each table has a fa-plus-circle icon that changes to a fa-minus-circle icon when clicked. However, I am unable to change it back to the plus-circle icon when clicked again. Can someone please assist me with this issue?
<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>
How do I recover my account?
</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>