JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form id="step-form" action="" method="post">

  <div class="col-xs-12">
    <h2 class="red-ribbon not-full">Title Loan &amp; Personal Loan Application</h2>
    <p class="form-desc">Fill out this application to Pre-Qualify for a Title Loan or a Registration Loan</p>
  </div>

  <div class="clearfix"></div>

  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="full-name">Full name <sup>*</sup></label>
      <input type="text" name="name" id="full-name" class="form-control" required="required">
    </div>
  </div>

  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="zip">ZIP <sup>*</sup></label>
      <input type="text" name="zip" id="zip" class="form-control" required="required">
    </div>
  </div>

  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="email">Email <sup>*</sup></label>
      <input type="email" name="email" id="email" class="form-control" required="required">
    </div>
  </div>

  <div class="col-xs-12 col-md-6">
    <div class="form-group">
      <label for="phone">Phone <sup>*</sup></label>
      <input type="text" name="phone" id="phone" class="form-control" required="required">
    </div>
  </div>
  
  <div class="col-xs-12">
    <h3 class="thin">What type of Loan are you applying for*</h3>
  </div>
  
  <div class="col-xs-12">

      
      <label for="loan-title">
      <input type="radio" name="loan_type" id="loan-title" checked="checked" value="Title Loan" data-show="1|4|5|6|7|">
        <span class="title">Title Loan</span><br>
        <span class="desc">I own my car</span>
      </label>
  
      <label for="loan-reg">
      <input type="radio" name="loan_type" id="loan-reg" value="Registration Loan" data-show="2|3">
        <span class="title">Registration Loan</span><br>
        <span class="desc">I am still making payments</span>
      </label>
   ...

JavaScript

function in_array(needle, haystack, strict) {
  var found = false,
    key, strict = !!strict;
  for (key in haystack) {
    if ((strict && haystack[key] === needle) || (!strict && haystack[key] == needle)) {
      found = true;
      break;
    }
  }
  return found;
}

$('[name="loan_type"]').change(function() {
  srt = $(this).data('show');
  var flag = srt.split('|');
  $('div[data-visible]').each(function(i) {
    $vis = $(this).attr('data-visible');
    if (true == in_array($vis, flag)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});