Show phone inputs that contain a value

Only shows additional phone numbers if they have a value, otherwise they are left off the form. Text is dynamic on the toggle.

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 my-3">
  <div class="container">
    <div class="text-white">
      <h1 class="text-white mb-2">Show more/less</h1>
      <p>Only reveals "Show more" and additional phone fields if they contain a value. Delete the value from the secondary and Tertiary input values to see the different results.</p>
      <p>"Show more..." text changes from show more to show less and vice versa.</p>
    </div>
    <div class="bg-white p-3 rounded shadow mw-sm mx-auto" id="formDiv">
      <p class="h3 ion-ios-telephone-outline"> Phone</p>
      <hr />
      <!-- Start Form -->
      <form class="" id="myForm" onsubmit='return false'>
        <!-- Primary Phone | Row 1 -->
        <div class="form-row">
          <div class="col-sm-8">
            <label for="MobilePhone">Primary</label>
            <input type="text" value="5555555555" class="form-control mb-2" id="MobilePhone" aria-describedby="mobilPhHelp">
          </div>
          <div class="col-sm-4">
            <button type="submit" class="btn btn-primary">Verify</button>
          </div>
        </div>
        <!-- Toggle Text -->
        <div class="mb-2">
          <a id="showMoreLink" data-toggle="collapse" href="#collapseNumbers" aria-expanded="false"...

CSS

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

p,
h1 {
  max-width: 400px;
  margin: 0 auto;
}

.mw-sm {
  min-width: 300px;
  max-width: 400px;
}

.btn {
  margin-top: 31px;
}

@media(max-width: 575px) {
  .btn {
    margin-top: 0px;
  }
}

JavaScript

// Function to hide relevant fields.
  $(function() {
    // Check to see if input fields have a value of empty ''.
    $('#collapseNumbers input').each(function() {
      if ($(this).val() == '') {
        // If the value is empty, add bootstrap d-none (display:none;) to hide the field
        $(this).parent('li').addClass('d-none');
        console.log(this);
      }
    });

    // Hide the Toggle Phone numbers link (button) if there are no additional phone numbers.
    if (($('#HomePhone').val() == '') && ($('#WorkPhone').val() == '')) {
      $('#showMoreLink').addClass('d-none');
    }

    // Change the link to toggle text "show more" or "show less"
    $('#showMoreLink').click(function() {
      if ($(this).text() == 'Show less...') {
        $(this).text('Show more...');
      } else {
        $(this).text('Show less...');
      };
    });
  });