<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Accordion with Plus Minus Icons</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .bs-example{
        margin: 20px;
    }
    .accordion .fa{
        margin-right: 0.5rem;
    }
</style>
<script>
    $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function(){
        	$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
        	$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });
</script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <div class="bs-example">
          <div class="accordion" id="accordionExample">
              <div class="card">
                  <div class="card-header" id="headingOne">
                      <h2 class="mb-0">
                          <button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> 
                           Marketing</button>									
                      </h2>
                  </div>
                  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                      <div class="card-body">
                        <div class="col-lg-8 col-md-6 footer-contact">
                          <h3><img src="assets/img/favicon.png" alt=""/>&nbsp;&nbsp;Saurashtra</h3>
                          <p>
                            <strong>Name :</strong> Mr Pratap Jethwa<br>
                            <strong>Designation :</strong> <br>
                            <strong>Phone :</strong> +91-79-40227500<br>
                            <strong>Email :</strong> marketing@saurashtracorp.com<br>
                          </p>
                        </div>
                      </div>
                  </div>
              </div>
              <div class="card">
                  <div class="card-header" id="headingTwo">
                      <h2 class="mb-0">
                          <button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#collapseTwo">
                            <i class="fa fa-plus"></i> Purchase</button>
                      </h2>
                  </div>
                  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                      <div class="card-body">
                        <div class="col-lg-8 col-md-6 footer-contact">
                          <h3><img src="assets/img/favicon.png" alt=""/>&nbsp;&nbsp;Saurashtra</h3>
                          <p>
                            <strong>Name :</strong><br>
                            <strong>Designation :</strong> <br>
                            <strong>Phone :</strong> <br>
                            <strong>Email :</strong> <br>
                          </p>
                        </div>
                      </div>
                  </div>
              </div>
              <div class="card">
                  <div class="card-header" id="headingThree">
                      <h2 class="mb-0">
                          <button type="button" class="btn btn-info btn-block" data-toggle="collapse" data-target="#collapseThree">
                            <i class="fa fa-plus"></i> Accounts</button>                     
                      </h2>
                  </div>
                  <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                      <div class="card-body">
                        <div class="col-lg-8 col-md-6 footer-contact">
                          <h3><img src="assets/img/favicon.png" alt=""/>&nbsp;&nbsp;Saurashtra</h3>
                          <p>
                            <strong>Name :</strong> <br>
                            <strong>Designation :</strong> <br>
                            <strong>Phone :</strong> <br>
                            <strong>Email :</strong> <br>
                          </p>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      </div>
    </div>
  </div>
 
</body>
</html>