<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="widthContraint"> <div class="inputContainer"> <div class="input-group input-group-sm"> <span class="input-group-addon" id="logoModifier">ANC SEARCH</span> <input type="text" class="form-control" placeholder="Search for.." id="searchField"> <span class="input-group-btn"> <button class="btn btn-primary" type="button" id="searchButton" data-loading-text="Searching..">Search</button> </span> <span id="deviceCheckbox" class="input-group-addon"> <input type="checkbox" aria-label=""> Show Devices </span> </div> </div> <div class="progressContainer"> </div> <ul class="resultsContainer"> <li> <div class="panel panel-default" id="searchPanel"> <div class="panel-heading" id="searchPanelHeading">Result</div> <div class="panel-body"> <table class="table" id="addressTable"> <tr> <td>ANC Code</td> <td>EFK</td> <td>BTID</td> <td>4532</td> <td>Sort Code</td> <td>24004233</td> <td width="100%"></td> </tr> </table> </div> <div style="background-color: #fafafa; border-top: 1px solid #dddddd;" class="panel-body"> <table class="table" id="addressTable"> <tr> <td>Address</td> <td>1234 Something Drive, Southampton, SN2 PL5</td> <td width="100%"></td> </tr> <tr> <td>Location</td> <td>Southampton</td> </tr> <tr> <td>Phone Number</td> <td>01327 340456</td> </tr> </table> </div> <table class="table" id="deviceTable"> <tr> <td colspan="5"> <span id="deviceCheckboxes" class="input-group-addon"> <input type="checkbox" aria-label="" checked> Show Workstations </span> <span id="deviceCheckboxes" class="input-group-addon"> <input type="checkbox" aria-label="" checked> Show Printers </span> <span id="deviceCheckboxes" class="input-group-addon"> <input type="checkbox" aria-label=""> Show Servers </span> </tr> </tr> <tr> <th>Device Code</th> <th>Device Name</th> <th>WSID</th> <th>IP Address</th> <th>TAU Indicator</th> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.43.243.22</td> <td>20</td> </tr> <tr> <td>W</td> <td>Workstation4324</td> <td>4234</td> <td>199.243.22</td> <td>20</td> </tr> </table> </div> </li> </ul> </div> </div>

.container { width: 100%; } .widthContraint { margin: 0 auto; width: 600px; } .inputContainer { width: 100%; border-bottom: 2px solid #428bca; padding-bottom: 8px; padding-top: 8px; } .progressContainer { width: 100%; } .resultsContainer { padding: 0; margin: 0; list-style: none; width: 100%; margin-top: 8px; } #searchPanel { font-size: 12px; border-radius: 3px; } #resultsTable { } #addressTable { margin: 0; } #addressTable td { border: 0; padding: 4px; } .panel-body { padding: 8px; } #addressTable td:nth-child(1) { font-weight: bold; } #addressTable td:nth-child(3) { font-weight: bold; } #addressTable td:nth-child(5) { font-weight: bold; } #deviceCheckbox { background-color: #fff; border: 0; } #deviceCheckboxes { background-color: #fff; border: 0; margin: 0; font-size: 8pt; } .table td { white-space: nowrap; } #searchPanelHeading { height: 30px; padding: 5px 10px; line-height: 1.5; color: #9e9e9e; } #deviceTable { } #logoModifier { border: 0; background-color: #fff; font-weight: bold; font-size: 10pt; min-width: 200px; } #searchField { border-radius: 3px; }

$( document ).ready(function() { initEvents(); }); function initEvents() { $("#searchButton").on("click", function () { var $btn = $(this).button("loading"); $("#searchField").attr("disabled", true); }); $(".inputContainer").hover(function(){ $(this).stop().animate({borderBottomWidth: "4px"},{duration: 170, complete: function() {}} ); }, function () { $(this).stop().animate({borderBottomWidth: "2px"},{duration: 170, complete: function() {}} ); }); } function enableInput() { $("#searchButton").button("loading"); $("#searchField").attr("disabled", false); }