tab_Test - L-Saber Academy (LSA)

<!DOCTYPE html>
<html>
<head>
<html lang="en">
<title>Tab - Tables</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.0/b-html5-1.6.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/b-1.6.0/b-html5-1.6.0/datatables.min.js"></script>
<script src="./site.js.download"></script>
<script> table.destroy(); </script>

<style>div.fw-container {z-index: 1;}</style>

<style>
body {font-family: Arial;}

/* Style the tab /
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/ Style the buttons inside the tab /
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/ Change background color of buttons on hover /
.tab button:hover {
background-color: #ddd;
}

/ Create an active/current tablink class /
.tab button.active {
background-color: #ccc;
}

/ Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

<script>
$(document).ready( function () {

var title;

var table = $('#example')
.addClass( 'nowrap' )
.dataTable( {
responsive: true,
scrollY: 300,
scrollCollapse: true,
search: {"search": ""},
} );

var table2 = $('#example2')
.addClass( 'nowrap' )
.dataTable( {
responsive: true,
scrollY: 300,
scrollCollapse: true,
search: {"search": ""},
} );
} );
</script>
</head>
<body>

<h2>Tabs</h2>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Tab 1')">Tab 1</button>
<button class="tablinks" onclick="openCity(event, 'Tab 2')">Tab 2</button>
<button class="tablinks" onclick="openCity(event, 'Tab 3')">Tab 3</button>
</div>

<div id="Tab 1" class="tabcontent">
<h3>Tab 1</h3>
</div>

<div id="Tab 2" class="tabcontent">
<div class="container">
<div class="unit w-2-3">
<div class="hero-callout">
<div id="example_wrapper" style="color:#000000" class="dataTables_wrapper">
<div id="example_filter" class="dataTables_filter"></div>
<div class="dataTables_length" id="example_length"></div>
<body class="wide hero">
<a name="top"><br></a>
<input type=hidden name="dt_stitle" id="dt_stitle" value="Title 1"/>

<table id="example" class="display nowrap dataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="example_info">

<thead><tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Address: activate to sort column ascending">Address</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="City: activate to sort column ascending">City</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 30px;" aria-label="State: activate to sort column ascending">State</th></tr>
</thead>

<tbody>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Airi Satou</a></td><td style="color:#000000">975 South Central Ave</td><td style="color:#000000">Calico</td><td style="color:#000000">Ma</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Simon Franks</td><td style="color:#000000">3254 Broken Ave</td><td style="color:#000000">Francis</td><td style="color:#000000">In</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div id="Tab 3" class="tabcontent">
<div class="container">
<div class="unit w-2-3">
<div class="hero-callout">
<div id="example2_wrapper" style="color:#000000" class="dataTables_wrapper">
<div id="example2_filter" class="dataTables_filter"></div>
<div class="dataTables_length" id="example2_length"></div>
<body class="wide hero">
<a name="top"><br></a>
<input type=hidden name="dt_stitle" id="dt_stitle" value="Title 2"/>

<table id="example2" class="display nowrap dataTable dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="example2_info">

<thead><tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">Name</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Address: activate to sort column ascending">Address</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 50px;" aria-label="City: activate to sort column ascending">City</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 30px;" aria-label="State: activate to sort column ascending">State</th></tr>
</thead>

<tbody>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Airi Satou</a></td><td style="color:#000000">975 South Central Ave</td><td style="color:#000000">Calico</td><td style="color:#000000">Ma</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" class="sorting_1" tabindex="0">Angelica Ramos</td><td style="color:#000000">5123 Farmer Ave</td><td style="color:#000000">Sweeney</td><td style="color:#000000">Ri</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Mark Williams</td><td style="color:#000000">7 Hidden Crest</td><td style="color:#000000">Marshalville</td><td style="color:#000000">Mn</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Leslie Marcus</td><td style="color:#000000">953 Marias Street</td><td style="color:#000000">San Marcus</td><td style="color:#000000">Ma</td></tr>
<tr class="odd"><td style="color:#0000FF" tabindex="0" class="sorting_1">Kris Smelter</td><td style="color:#000000">8 Harvard</td><td style="color:#000000">Riverside</td><td style="color:#000000">Mo</td></tr>
<tr class="even"><td style="color:#0000FF" tabindex="0" class="sorting_1">Simon Franks</td><td style="color:#000000">3254 Broken Ave</td><td style="color:#000000">Francis</td><td style="color:#000000">In</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>