JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
					  <div id="phone-field-toggle" class="wrap-box-search-new hide">
					    <form action="#" method="GET" accept-charset="utf-8">
					      <span>
					        <input class="inputphonenumber" type="tel" placeholder="EX: XXX-XXX-XXXX" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="phone">
					      </span>
					      <button type="submit" class="search-btn">Search</button>
					    </form>
					  </div>

					  <div id="address-field-toggle" class="wrap-box-search-address hide">
					    <form action="#" method="GET" accept-charset="utf-8">
					      <span class="firstname">
					        <input type="text" placeholder="First Name" id="firstname" name="firstname">
					      </span>
					      <span class="lastname">
					        <input type="text" placeholder="Last Name" id="lastname" name="lastname">
					      </span>
					      <span class="location">
					        <span class="ti-location-pin"></span>
					        <input type="text" placeholder="City" name="City">
					      </span>
					      <span class="categories">
					        <span class="ti-angle-down"></span>
					        <select name="categories">
					          <option value="AL">Alabama</option>
					          <option value="AK">Alaska</option>
					          <option value="AZ">Arizona</option>
					          <option value="AR">Arkansas</option>
					          <option value="CA">California</option>
					          <option value="CO">Colorado</option>
					          <option value="CT">Connecticut</option>
					          <option value="DE">Delaware</option>
					          <option value="DC">District Of Columbia</option>
					          <option value="FL">Florida</option>
					          <option value="GA">Georgia</option>
					          <option value="HI">Hawaii</option>
					  ...

CSS

.hide {
  display: none;
}

JavaScript

function show1() {
  document.getElementById('phone-field-toggle').style.display = 'block';
  document.getElementById('address-field-toggle').style.display = 'none';
  document.getElementById('ip-field-toggle').style.display = 'none';
}

function show2() {
  document.getElementById('phone-field-toggle').style.display = 'none';
  document.getElementById('address-field-toggle').style.display = 'block';
  document.getElementById('ip-field-toggle').style.display = 'none';
}

function show3() {
  document.getElementById('phone-field-toggle').style.display = 'none';
  document.getElementById('address-field-toggle').style.display = 'none';
  document.getElementById('ip-field-toggle').style.display = 'block';
}