JSFiddle - React, Tailwind, and code Playground
by Matt Hopkins
HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--Add New Sessions-->
<div class = 'container'>
<div class = 'newsession' style = 'border-style: solid; border-width: 1px;'>
<div class = 'container'>
<form method = 'POST'>
<br>
<label>Term: </label><input type = "text" name = "Term" value = "2159"><br>
<label>Date: </label><input type = "text" class = "datepickersession" name = "SessionDate"><br>
<label>Time Begin: </label><input type = "text" name = "TimeBegin" placeholder= "e.g.: 9:00am"><br>
<label>Time End: </label><input type = "text" name = "TimeEnd" placeholder= "e.g.: 9:00am"><br>
<label>Cut Off Date: </label><input type = "text" class = "datepickersession" name = "CutDate"><br>
<label>Max Capacity: </label><input type = "text" name = "MaxCap" value = "20"><br>
<label>Location: </label><input type = "text" name = "Location">
<br>
<label>Hide: </label><input type = 'checkbox' name = "Hide"><br>
<button type='submit' class = 'btn btn-primary' name = 'saveSession' value = 'saveSession'>Save</button>
<button type='submit' class = 'btn btn-danger' name = 'cancleaddSession' >Cancel</button>
</form><br>
</div>
</div><br>
<!--End of Add New Sessions-->
<form class='form-horizontal' method='POST'>
</form></div>
JavaScript
$(document).ready(function () {
$('.add').click(function () {
$(".newsession").toggle();
return false;
});
$('.editSes').click(function () {
var showthis = $(this).attr("showthis");
$("#show" + showthis).toggle();
return false;
});
$(".show").click(function () {
var show = $(this).attr("show");
$("#" + show).toggle();
return false;
});
});
$(function () {
$(".datepickersession").datepicker();
});