Sliding form fields

by Alex Fogarty

HTML

<div class="container">
  <h2 class="section-title">Payment Information</h2>
  <form>
    <div class="form-group">
      <label for="rdoBankAccount">
        <input type="radio" name="payment" id="rdoBankAccount" data-target="#bank-account" />
        Bank Account
      </label>
    </div>
    <div id="bank-account" class="payment-type">
      <div class="form-group">
        <label for="txtBankName">Bank Name</label><br/>
        <input type="text" id="txtBankName" />
      </div>
      <div class="form-group">
        <label for="txtBankNumber">Account Number</label><br/>
        <input type="text" id="txtBankNumber" />
      </div>
    </div>
    <div class="form-group">
      <label for="rdoCreditCard">
        <input type="radio" name="payment" id="rdoCreditCard" data-target="#credit-card" />
        Credit Card
      </label>
    </div>
    <div id="credit-card" class="payment-type">
      <div class="form-group">
        <label for="txtNameOnCard">Name on Card</label><br/>
        <input type="text" id="txtBankName" />
      </div>
      <div class="form-group">
        <label for="txtCardNumber">Card Number</label><br/>
        <input type="text" id="txtCardNumber" />
      </div>
    </div>
  </form>
</h2>

CSS

html {
  font-family: Helvetica;
  font-size: 12px;
  color: #555;
}
.container {
  width: 500px;
  margin: 0 auto;
}
.section-title { margin-bottom: 0; }
form {
  border: 1px solid #ddd;
  padding: 20px;
}
input[type='text'] {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  padding: 5px;
}
.form-group {
  margin-bottom: 10px;
}
.payment-type .form-group {
  padding-left: 25px;
}
.payment-type {
  display: none;
}

JavaScript

$("[name='payment']").on("change", function() {
  var selector = $(this).data("target");
  $(".payment-type").slideUp();
  $(selector).slideDown();
});