<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="row"> <div class="col-md-3"> <ul class="nav nav-pills nav-stacked admin-menu"> <li class="active"><a href="#" data-target-id="home"><i class="fa fa-home fa-fw glyphicon glyphicon-wrench"></i>Admin<span class='pull-right cons'> <span class='glyphicon glyphicon-chevron-right'></span></span></a></li> <li><a href="#" data-target-id="customers"><i class="fa fa-list-alt fa-fw glyphicon glyphicon-user"></i>Customers</a></li> <li><a href="#" data-target-id="settings"><i class="fa fa-file-o fa-fw glyphicon glyphicon-cog"></i>Settings</a></li> <li><a href="#" data-target-id="more"><i class="fa fa -bar-chart-o fa-fw glyphicon glyphicon-tasks"></i>More</a></li> </ul> </div> <div class="col-md-3 well admin-content" id="home"> <ul class="nav nav-pills nav-stacked admin-mennu"> <li class="colmd active" ><a href="#" target-id="running"><i class="fa fa-home fa-fw"></i>Accounts Running<span class='pull-right gliph'> <span class='glyphicon glyphicon-chevron-right'></span></span></a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="notrunning"><i class="fa fa-list-alt fa-fw"></i>Accounts Not Running</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="loginerrors"><i class="fa fa-file-o fa-fw"></i>Login Errors</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="flagged"><i class="fa fa-bar-chart-o fa-fw"></i>Accounts Flagged - Unresolved</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="incomplete"><i class="fa fa-table fa-fw"></i>Accounts Incomplete</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="banned"><i class="fa fa-tasks fa-fw"></i>Accounts Banned</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" target-id="more2"><i class="fa fa-calendar fa-fw"></i>More...</a></li> </ul> </div> <div class="col-md-3 well customers admin-content" id="customers"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin-content" id="settings"> <ul class="nav nav-pills nav-stacked admin-mennu"> <li class="colmd active" ><a href="#" ><i class="fa fa-home fa-fw"></i>Stop All</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-list-alt fa-fw"></i>Restart All</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-file-o fa-fw"></i>Rest All</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-bar-chart-o fa-fw"></i>Backup Settings</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-table fa-fw"></i>Backup All Info</a></li> </ul> </div> <div class="col-md-3 well admin-content" id="more"> <ul class="nav nav-pills nav-stacked admin-mennu"> <li class="colmd active" ><a href="#" ><i class="fa fa-home fa-fw"></i>Running</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-list-alt fa-fw"></i>Running</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-file-o fa-fw"></i>Running</a></li> <li class="colmd"><a href="http://www.jquery2dotnet.com" ><i class="fa fa-bar-chart-o fa-fw"></i>Running</a></li> </ul> </div> <div class="col-md-3 well admin" id="running"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Running Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="notrunning"> <table class="table table-bordered table-hover"> <thead> <tr> <th>UnRunning Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="loginerrors"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Login Errors Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="flagged"> <table class="table table-bordered table-hover table-responsive"> <thead> <tr> <th>Flagged Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="incomplete"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Incomplete Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="banned"> <table class="table table-bordered table-hover"> <thead> <tr> <th>Banned Accounts</th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> <div class="col-md-3 well admin" id="more2"> <table class="table table-bordered table-hover"> <thead> <tr> <th>More Options ++ </th> <th>Status</th> <th>Control</th> <th>Purge</th> </tr> </thead> <tbody> <tr> <td>@Accodcvsunts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> <tr> <td>@Accounts</td> <td><strong>OK</strong></td> <td>STOP</td> <td>DELETE</td> </tr> </tbody> </table> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); body{margin-top:20px;} .fa-fw {width: 2em;} .table {width: 30em;} table {border: 10px solid #f00;} li {padding-bottom: 10px; font-size: 30px; line-height: 3.928571429; width: 9em; color: #FF5733 ;} .colmd {padding-bottom: 10px; font-size: 14px; line-height: 3.698571429; width: 19em; color: #333;} td {line-height: 3.428571429 !important; background: ;} .table { padding:200px !important; border-spacing: 10px 50px;} .customers {width: 12cm !important;} .admin {width: 14cm !important;} tr:hover { color: #f4ff; background-color: #000;} .well { background: #fafafa ; width: 8.1cm;} .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #e91e63 ;} a { color: #e91e63;} .colmd { font-weight: bold;} .table-responsive { overflow-x: auto; }

$(document).ready(function() { var navItems = $('.admin-menu li > a'); var navItms = $('.admin-mennu li > a'); var navListItems = $('.admin-menu li'); var navListmd = $('.admin-mennu li'); var allWells = $('.admin-content'); var tables = $('.admin'); var allWellsExceptFirst = $('.admin-content:not(:first)'); var tablesExceptFirst = $('.admin:not(:first)'); allWellsExceptFirst.hide(); tables.hide() navItems.click(function(e) { e.preventDefault(); navListItems.removeClass('active'); $(".cons").remove(); $(this).closest('li').addClass('active'); $(this).append("<span class='pull-right cons'> <span class='glyphicon glyphicon-chevron-right'></span></span>") allWells.hide(); //nxtmenus.hide(); var target = $(this).attr('data-target-id'); tables.hide() $('#' + target).show(); }); //tablesExceptFirst.hide(); --- substituted by tables.hide() navItms.click(function(f) { f.preventDefault(); navListmd.removeClass('active'); $(".gliph").remove(); $(this).closest('.colmd').addClass('active'); $(this).append("<span class='pull-right gliph'> <span class='glyphicon glyphicon-chevron-right'></span></span>") tables.hide(); var targeted = $(this).attr('target-id'); $('#' + targeted).show(); }); });