JSFiddle - React, Tailwind, and code Playground
by Patrick Kershner
HTML
<form class="form-horizontal" action="#" id="addForm" method="post">
<div class="form-group">
<label for="asset_type">Asset Type</label>
<select id="asset_type" name="asset_type" class="form-control">
<option value="hardware">Hardware</option>
<option value="software">Software</option>
</select>
</div>
<div class="form-group">
<label for="assetTag">Asset Tag </label>
<input type="text" name="assetTag" class="form-control" id="assetTag" placeholder="Asset Tag">
</div>
<div class="form-group">
<label for="serialNumber">Serial Number</label>
<input type="text" name="serialNumber" class="form-control" id="serialNumber" placeholder="Serial Number">
</div>
<div class="form-group">
<label for="vendor">Vendor</label>
<input type="text" name="vendor" class="form-control" id="vendor" placeholder="Vendor">
</div>
<div class="form-group">
<label for="platform">Platform</label>
<input type="text" name="platform" class="form-control" id="platform" placeholder="Platform">
</div>
<div class="form-group">
<label for="Type">Type</label>
<select id="type" name="type" class="form-control">
<option value="desktop">Desktop</option>
<option value="laptop">Laptop</option>
<option value="monitor">Monitor</option>
<option value="printer">Printer</option>
<option value="tablet">Tablet</option>
<option value="smartphone">Smartphone</option>
<option value="software">Software</option>
</select>
</div>
<div class="form-group">
<label for="model">Model</label>
<input type="text" name="model" class="form-control" id="model" placeholder="Model">
</div>
<div class="form-group">
<label for="status">Status</label>
<select id="status" name="status" class="form-control">
<option value="active">Active</option>
<option...
JavaScript
$(document).ready(function(){
$("#addForm").hide();
$(".btn1").click(function(){
$("#addForm").slideUp();
});
$(".btn2").click(function(){
$("#addForm").slideDown();
});
});