JSFiddle - React, Tailwind, and code Playground

by Julian

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<div id="buttons">
<button id="form1" class="btn btn-primary btn-block">Form1</button>
<button id="form2" class="btn btn-primary btn-block">Form2</button>
</div>


<div class="col-sm-2">
<form  class="form1">
<h2>
Form 1
</h2>
   <form class="form-inline" action="" id="myform" form="" method="post">



    <!-- Select Basic -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="utility_type"></label>
        <div class="col-md-8">



            <select id="utility_type" name="utility_type" class="form-control input-lg" required/>
            <option value="">Energy Type</option>
            <option value="Electric">Electric</option>
            <option value="Gas">Gas</option>
            <option value="Gas &amp; Electric Combo">Gas &amp; Electric Combo</option>
            </select>
        </div>
    </div>


    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-4 control-label" for="bill_cost"></label>
        <div class="col-md-8">
            <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>

        </div>
    </div>

    <!-- Select Basic -->
    <div class="form-group">
        <label class="col-md-4 control-label" for="location"></label>
        <div class="col-md-8">
            <select id="location" name="location" class="form-control input-lg" required>
 <option value="" >Location</option>
      <option value="South East">South East</option>
      <option value="London">London</option>
      <option value="North West">North West</option>
      <option value="East of England">East of England</option>
      <option value="West Midlands">West Midlands</option>
      <option value="South West">South West</option>
      <option value="Yorkshire and the Humber">Yorkshire and the Humber</option>
      <option value="East Midlands">East...

CSS

form
{
    display:none;
}

JavaScript

$('button').on('click', function(){
    var whatForm = $(this).attr('id');
    $('#buttons').slideUp();
    $('.'+whatForm).slideDown();
});

$('.backbtn').on('click', function(e){
    e.preventDefault();
    $('#buttons').slideDown();
    $('form').slideUp();
});