L-Saber Academy (LSA)
  • Home
  • Training
    • Velocities
    • Forms
    • Flow
    • Blocking
    • Sparring
    • Other Training
  • Gallery
  • Sabers / Acc
    • Sabers
    • Other Accessories
  • Contests
    • Fan Films
    • DEMO Teams
    • PRO-Flow
    • Flow
    • Lessons
  • Other Resources
    • Other Resources
    • Contact
    • Locations
    • Ranking

​<!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>

Proudly powered by Weebly
  • Home
  • Training
    • Velocities
    • Forms
    • Flow
    • Blocking
    • Sparring
    • Other Training
  • Gallery
  • Sabers / Acc
    • Sabers
    • Other Accessories
  • Contests
    • Fan Films
    • DEMO Teams
    • PRO-Flow
    • Flow
    • Lessons
  • Other Resources
    • Other Resources
    • Contact
    • Locations
    • Ranking