<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Begin Modal Body --> <label for='basicInfo' class='text-primary display-5'>Basic Action Info:</label> <div class='border border-dark p-4 rounded' id='basicInfo'> <!-- Begin Unique Action Form Group --> <div class='form-group action collapse' data-toggle='collapse'> <!-- Action Source --> <div class='form-group row'> <div class='col'> <label for='actionSource' class='text-primary'>Source of Action</label> <select class='form-control' id='actionSource'> <option value=0>Choose One</option> <option value='Goals and Objectives'>Goals and Objectives</option> <option value='New Construction Program'>New Construction Program</option> <option value='Planning Yard'>Planning Yard</option> <option value='Other'>Other</option> </select> <div class='text-danger collapse' id='valSource'>Action Source is required.</div> </div> </div> <!-- End Action Source --> <!-- Begin Goals and Objectives (Hidden by Default) --> <div class='form-group collapse' data-toggle='collapse' id='gandoDiv'> <label for='gando' class='text-primary'>Command Objective</label> <select class='form-control' id='gando'> <option value=0>Choose an Objective</option> </select> <div class='text-danger collapse' id='valGando'>Objective is required.</div> </div> <!-- End Goals and Objectives --> </div> <!-- End Unique Action Form Group --> <!-- Begin Action Status --> <div class='form-group edit' data-toggle='collapse'> <label for='actionStatus' class='text-primary'>Action Status</label> <select class='form-control' id='actionStatus'> <option value='0'>Choose a status</option> <option value='Open'>Open</option> <option value='Closed'>Closed</option> </select> </div> <!-- End Action Status --> <!-- Begin Action Title --> <div class='form-group'> <label for='actionTitle' class='text-primary'>Action Title</label> <input type='text' class='form-control' placeholder='Action Title' id='actionTitle'> <div class='text-danger collapse' id='valTitle'>Action Title is required.</div> </div> <!-- End Action Title --> <!-- Begin Action Description --> <div class='form-group'> <label for='samsDesc' class='text-primary'>Action Description</label> <textarea class='form-control' id='samsDesc' rows='4' placeholder='Action Description'></textarea> <div class='text-danger collapse' id='valDesc'>Action Description is required.</div> </div> <!-- End Action Description --> <!-- Begin Action Dept/Due/Assigned --> <div class='form-group row'> <div class='col'> <label for='samsDept' class='text-primary'>Department</label> <select class='form-control' id='samsDept'> <option value=0>Choose a Department</option> </select> <div class='text-danger collapse' id='valDept'>Department is required.</div> </div> <div class='col'> <label for='samsDue' class='text-primary'>Due Date</label> <div class='input-group date' data-provide='datapicker'> <input type='text' class='form-control' id='samsDue'> </div> <div class='text-danger collapse' id='valDue'>Due Date is required.</div> </div> <div class='col'> <label for='assignedTo' class='text-primary'>Assigned To</label> <div id='assignedTo'></div> </div> </div> <!-- Begin Action Dept/Due/Assigned --> </div> </div> <!-- Begin Sub-Actions --> <div class='form-group newAction'> <div class='form-check form-check-inline' data-toggle='collapse'> <input class='form-check-input' type='checkbox' id='subActCheck' value='subActionCheck'> <label class='form-check-input' for='compCheck'>Create Subactions?</label> </div> <div id='subActions' class='collapse form-group p-4' data-toggle='collapse'> <label for='subActionDiv' class='text-primary'>Sub Actions</label> <div class='border-4 border-dark rounded' id='subActionDiv'> <div class='row d-flex justify-content-end m-2'> <button type='button' class='btn btn-primary btn-sm' id='addRow'>Add Row</button> </div> <table class='table'> <thead> <tr> <th scope='col'>Title</th> <th scope='col'>Description</th> <th scope='col'>Assigned To</th> <th scope='col'>Due Date</th> <th scope='col'>Remove</th> </tr> </thead> <tbody id='subTable'> <tr> <td><input type='text' class='form-control subTitle'></td> <td><textarea type='text' class='form-control subDesc'></textarea></td> <td><div class='subAssigned' id='row-1'></div></td> <td><input type='text' class='form-control subDue' id='dueDate'></td> </tr> </tbody> </table> </div> </div> </div> <!-- Begin Sub-Actions --> <!-- End Modal Body --> </div>