Custom Collapse with dynamic arrow

Collapsible bootstrap div with caret that changes from right arrow to down arrow and vice versa on click

by Amy Ruddy

HTML

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--IonIcons-->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div class="main py-3">
  <div class="container">
    <p class='text-white text-center lead'>Custom Collapse w/dynamic arrow</p>
    <form onsubmit='return false;'>
      <div class="form-group">
        <label for="inputWorkPhone">Work Phone</label>
        <input type="text" class="form-control" id="inputWorkPhone" placeholder="555-555-5555">
      </div>
      <div id="addPhone" class="collapseDiv ion-arrow-right-b" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseHomePhone multiCollapseMobilePhone">
        <p class="d-block mb-2">&nbsp;Additional Phone Numbers</p>
      </div>
      <div class="form-row">
        <div class="form-group col-sm-6 collapse multi-collapse">
          <label for="inputHome">Home Phone</label>
          <input type="text" class="form-control" id="inputHome" placeholder="555-555-5555">
        </div>
        <div class="form-group col-sm-6 collapse multi-collapse">
          <label for="inputMobile">Mobile Phone</label>
          <input type="text" class="form-control" id="inputMombile" placeholder="555-555-5555">
        </div>
      </div>
      <div id="addAddress" class="collapseDiv ion-arrow-right-b" data-toggle="collapse"...

CSS

html,
.main {
  background-color: #007bff;
}

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.collapseDiv {
  color: #007bff;
  cursor: pointer;
  display: flex;
}

.collapseDiv span {
  margin-right: 5px;
  color: #007bff;
}

/* Line after addAddress */

.collapseDiv::after {
  content: '';
  flex: 1;
  margin: auto 0 auto 5px;
  height: 0;
  border-top: solid #007bff 1px;
  padding-top: 5px;
}

.ion-arrow-right-b::before,
.ion-arrow-down-b::before {
  padding-top: 3px;
}

JavaScript

//Can be used with more than one collapse
 $('.collapseDiv').each(function() {
   $(this).click(function() {
     $(this).toggleClass('ion-arrow-right-b ion-arrow-down-b');
   });
 });