joequery
8/21/2011 - 6:32 AM

"Toggling" Tables

"Toggling" Tables

gistfile1.html
content_copyfile_download
<html>
<head>
 <title></title>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
	.hideme {display: none;}
</style>
</head>
<body>
<table id="mainTable" border="1">
 <tr>
  <td rowspan="5"><img src="images/photos/Adam_Burish_6_1_1980.jpg" /></td>
  <td><a href="#" class="toggle" id="player">Player info</a> | <a href="#" id="contract">Contract info</a> | <a href="#" id="draft">Draft info</a></td>
 </tr>
 <tr>
  <td rowspan="4">
   <table border="1" id="playertable">
    <tr>
     <td>Name: Some Plaer</td>
     <td>Age:1</td>
     <td>yoyoyo</td>
    </tr>
    <tr>
     <td>Name: Dude</td>
     <td>Age:1</td>
     <td>yoyoyo</td>
    </tr>
   </table>
   <table border="1" class="hideme" id="contracttable">
    <tr>
     <td>Name: Some Contract</td>
     <td>Age:1</td>
     <td>yoyoyo</td>
    </tr>
    <tr>
     <td>Name: Dude</td>
     <td>Age:1</td>
     <td>yoyoyo</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<script>
var mainTable = $("#mainTable");
var playerTable = $("#playertable");
var contractTable = $("#contracttable");

$("#player").click(function(){
	mainTable.find("table").not(playerTable).hide();
	playerTable.show();
});

$("#contract").click(function(){
	mainTable.find("table").not(contractTable).hide();
	contractTable.show();
});


</script>
</body>
</html>