Javascript and Bootstrap dropdown

Question

I'm trying to make the bootstrap dropdown change class on click, and I managed to do that. When i click on the dropdown the class changes from "+" to "-" but when i click on the second dropdown the one i clicked before doesn't change class back. Is there a way with javascript to do with if and else statements. I'm really having a bad time making this work.

Here is the HTML of the dropdown

<div class="dropdownCard">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span><i class="fas fa-percent percent1"></i>Angebot</span> <span><i class="fas fa-minus minus"></i></span>
       </button>
      </h5>
    </div>
 <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
   <div class="dropdownBody">
     <div class="dropdownDetail">
       <div class="detailTitle">
         <h2>"Steiler Donnerstag"</h2>
       </div>
      <div class="detailInfo">
      <p><span class="titleCard">Profitieren Sie von <strong>20% Rabatt</strong> auf <br></span> - Die Fahrt mit dem Postauto ab Reichenbach i.K. <br> auf die Griesalp und retour <br> - Ein Mittagessen (drei Gänge, ohne Getränke) in einem <br> der Restaurants Berggasthaus Golderli, Restaurant Alpenruh, <br> Griesalp Hotels oder dem Naturfreundehaus Gorneren <br><br>
       </p>
<a href="#" class="detailLink"><strong>Angebot auf MyPlus ansehen</strong></a>
       </div>
       <div class="detailImg">
       <img src="assets/img/Promo2.jpg" alt="promo image" class="img-fluid">
        </div>
      </div>
    </div>
  </div>
</div>

Here's the jQuery I built

$("button").click(function(){
    $(this).find(".minus").toggleClass("fa-minus fa-plus");
    });

I know that it might be easy but I'm a beginner so I would love to learn this way for the next uses.

Answer 1

this is the Css Only Solution for what you want with Bootstrap 4 Dropdown

note that you need to include Popper.js for dropdown in bootstrap 4

 .dropdown .dropdown-toggle::after { content: '+'; border: none; width: 10px; } .dropdown.show .dropdown-toggle::after { content: '-'; border: none; width: 10px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>