title: Button to switch tables
body: <p>I've made some buttons that whenever you press them it takes you to another table...</p>
  
  <p>My problem is that the tables (already made/designed) aren't showing up-- only the data is. </p>
  
  <p>The button themselves work but won't allow the tables to show, only the data.</p>
  
  <p>I really, really appreciate any help. </p>
  
  <p>Link to demo: <a href="http://jsfiddle.net/LpLhP/4/" rel="nofollow noreferrer">http://jsfiddle.net/LpLhP/4/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;img src="img" alt="img goes here"&gt;
  &lt;p&gt;
  &lt;a class="button" data-table="1" href="#"&gt;button1&lt;/a&gt;
  
  &lt;a class="button" data-table="2" href="#"&gt;button2&lt;/a&gt;
  
  &lt;a class="button" data-table="3" href="#"&gt;button3&lt;/a&gt;
  
  &lt;a class="button" data-table="4" href="#"&gt;button4&lt;/a&gt;
  
  
  
  
              &lt;table id="1"&gt;   
              &lt;div id="content"&gt;
              &lt;a class="back" href="#"&gt;&lt;/a&gt;
              &lt;span class="scroll"&gt;&lt;/span&gt;
              &lt;p class="head"&gt;    
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th scope="col" abbr="Starter"&gt;Smart Starter&lt;/th&gt;
                          &lt;th scope="col" abbr="Medium"&gt;Smart Medium&lt;/th&gt;
                          &lt;th scope="col" abbr="Business"&gt;Smart Business&lt;/th&gt;
                          &lt;th scope="col" abbr="Deluxe"&gt;Smart Deluxe&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;$ 2.90&lt;/td&gt;
                          &lt;td&gt;$ 5.90&lt;/td&gt;
                          &lt;td&gt;$ 9.90&lt;/td&gt;
                          &lt;td&gt;$ 14.90&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;512 MB&lt;/td&gt;
                          &lt;td&gt;1 GB&lt;/td&gt;
                          &lt;td&gt;2 GB&lt;/td&gt;
                          &lt;td&gt;4 GB&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;50 GB&lt;/td&gt;
                          &lt;td&gt;100 GB&lt;/td&gt;
                          &lt;td&gt;150 GB&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;19.90 $&lt;/td&gt;
                          &lt;td&gt;12.90 $&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
  
      &lt;table id="2"&gt;
             &lt;div id="content"&gt;
              &lt;a class="back" href="#"&gt;&lt;/a&gt;
              &lt;span class="scroll"&gt;&lt;/span&gt;
              &lt;p class="head"&gt;    
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th scope="col" abbr="Starter"&gt;Smart Starter&lt;/th&gt;
                          &lt;th scope="col" abbr="Medium"&gt;Smart Medium&lt;/th&gt;
                          &lt;th scope="col" abbr="Business"&gt;Smart Business&lt;/th&gt;
                          &lt;th scope="col" abbr="Deluxe"&gt;Smart Deluxe&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;$ 2.90&lt;/td&gt;
                          &lt;td&gt;$ 5.90&lt;/td&gt;
                          &lt;td&gt;$ 9.90&lt;/td&gt;
                          &lt;td&gt;$ 14.90&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;512 MB&lt;/td&gt;
                          &lt;td&gt;1 GB&lt;/td&gt;
                          &lt;td&gt;2 GB&lt;/td&gt;
                          &lt;td&gt;4 GB&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;50 GB&lt;/td&gt;
                          &lt;td&gt;100 GB&lt;/td&gt;
                          &lt;td&gt;150 GB&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;19.90 $&lt;/td&gt;
                          &lt;td&gt;12.90 $&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
      &lt;table id="3"&gt;
          &lt;thead&gt;
                &lt;div id="content"&gt;
              &lt;a class="back" href="#"&gt;&lt;/a&gt;
              &lt;span class="scroll"&gt;&lt;/span&gt;
              &lt;p class="head"&gt;    
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th scope="col" abbr="Starter"&gt;Smart Starter&lt;/th&gt;
                          &lt;th scope="col" abbr="Medium"&gt;Smart Medium&lt;/th&gt;
                          &lt;th scope="col" abbr="Business"&gt;Smart Business&lt;/th&gt;
                          &lt;th scope="col" abbr="Deluxe"&gt;Smart Deluxe&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;$ 2.90&lt;/td&gt;
                          &lt;td&gt;$ 5.90&lt;/td&gt;
                          &lt;td&gt;$ 9.90&lt;/td&gt;
                          &lt;td&gt;$ 14.90&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;512 MB&lt;/td&gt;
                          &lt;td&gt;1 GB&lt;/td&gt;
                          &lt;td&gt;2 GB&lt;/td&gt;
                          &lt;td&gt;4 GB&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;50 GB&lt;/td&gt;
                          &lt;td&gt;100 GB&lt;/td&gt;
                          &lt;td&gt;150 GB&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;19.90 $&lt;/td&gt;
                          &lt;td&gt;12.90 $&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
        &lt;table id="4"&gt;
          &lt;thead&gt;
                &lt;div id="content"&gt;
              &lt;a class="back" href="#"&gt;&lt;/a&gt;
              &lt;span class="scroll"&gt;&lt;/span&gt;
              &lt;p class="head"&gt;    
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th scope="col" abbr="Starter"&gt;Smart Starter&lt;/th&gt;
                          &lt;th scope="col" abbr="Medium"&gt;Smart Medium&lt;/th&gt;
                          &lt;th scope="col" abbr="Business"&gt;Smart Business&lt;/th&gt;
                          &lt;th scope="col" abbr="Deluxe"&gt;Smart Deluxe&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;$ 2.90&lt;/td&gt;
                          &lt;td&gt;$ 5.90&lt;/td&gt;
                          &lt;td&gt;$ 9.90&lt;/td&gt;
                          &lt;td&gt;$ 14.90&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;512 MB&lt;/td&gt;
                          &lt;td&gt;1 GB&lt;/td&gt;
                          &lt;td&gt;2 GB&lt;/td&gt;
                          &lt;td&gt;4 GB&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;50 GB&lt;/td&gt;
                          &lt;td&gt;100 GB&lt;/td&gt;
                          &lt;td&gt;150 GB&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                          &lt;td&gt;Unlimited&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;19.90 $&lt;/td&gt;
                          &lt;td&gt;12.90 $&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                          &lt;td&gt;free&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;th scope="row"&gt;&lt;/th&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;span class="check"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>/* Table 3 Style */
  table.table3{
      font-family:Arial;
      font-size: 18px;
      font-style: normal;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: -1px;
      line-height: 1.7em;
      text-align:center;
      border-collapse:collapse;
  }
  .table3 thead th{
      padding:6px 10px;
      text-transform:uppercase;
      color:#444;
      font-weight:bold;
      text-shadow:1px 1px 1px #fff;
      border-bottom:5px solid #444;
  }
  .table3 thead th:empty{
      background:transparent;
      border:none;
  }
  .table3 thead :nth-child(2),
  .table3 tfoot :nth-child(2){
      background-color: #7FD2FF;
  }
  .table3 tfoot :nth-child(2){
      -moz-border-radius:0px 0px 0px 5px;
      -webkit-border-bottom-left-radius:5px;
      border-bottom-left-radius:5px;
  }
  .table3 thead :nth-child(2){
      -moz-border-radius:5px 0px 0px 0px;
      -webkit-border-top-left-radius:5px;
      border-top-left-radius:5px;
  }
  .table3 thead :nth-child(3),
  .table3 tfoot :nth-child(3){
      background-color: #45A8DF;
  }
  .table3 thead :nth-child(4),
  .table3 tfoot :nth-child(4){
      background-color: #2388BF;
  }
  .table3 thead :nth-child(5),
  .table3 tfoot :nth-child(5){
      background-color: #096A9F;
  }
  .table3 thead :nth-child(5){
      -moz-border-radius:0px 5px 0px 0px;
      -webkit-border-top-right-radius:5px;
      border-top-right-radius:5px;
  }
  .table3 tfoot :nth-child(5){
      -moz-border-radius:0px 0px 5px 0px;
      -webkit-border-bottom-right-radius:5px;
      border-bottom-right-radius:5px;
  }
  .table3 tfoot td{
      font-size:38px;
      font-weight:bold;
      padding:15px 0px;
      text-shadow:1px 1px 1px #fff;
  }
  .table3 tbody td{
      padding:10px;
  }
  .table3 tbody tr:nth-child(4) td{
      font-size:26px;
      font-weight:bold;
  }
  .table3 tbody td:nth-child(even){
      background-color:#444;
      color:#444;
      border-bottom:1px solid #444;
      background:-webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.39, rgb(189,189,189)),
          color-stop(0.7, rgb(224,224,224))
          );
      background:-moz-linear-gradient(
          center bottom,
          rgb(189,189,189) 39%,
          rgb(224,224,224) 70%
          );
      text-shadow:1px 1px 1px #fff;
  }
  .table3 tbody td:nth-child(odd){
      background-color:#555;
      color:#f0f0f0;
      border-bottom:1px solid #444;
      background:-webkit-gradient(
          linear,
          left bottom,
          left top,
          color-stop(0.39, rgb(85,85,85)),
          color-stop(0.7, rgb(105,105,105))
          );
      background:-moz-linear-gradient(
          center bottom,
          rgb(85,85,85) 39%,
          rgb(105,105,105) 70%
          );
      text-shadow:1px 1px 1px #000;
  }
  .table3 tbody td:nth-last-child(1){
      border-right:1px solid #222;
  }
  .table3 tbody th{
      color:#696969;
      text-align:right;
      padding:0px 10px;
      border-right:1px solid #aaa;
  }
  .table3 tbody span.check::before{
      content : url(../images/check2.png)
  }
  </code></pre>
  
  <p>Java: </p>
  
  <pre><code>(function () {
      var tables = $("table");
      //Grabs all the tables
      tables.hide().first().show();
      //Hides all the tables except first
      $("a.button").on("click", function () {
          //Adds eventListner to buttons
          tables.hide();
          //Hides all the tables
          var tableTarget = $(this).data("table");
          //Gets data# of button
          $("table#" + tableTarget).show();
          //Shows the table with an id equal to data attr of the button
      })
  })();
  </code></pre>