Skip to content

Instantly share code, notes, and snippets.

@joequery

joequery/gist:1160252

Created August 21, 2011 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joequery/1160252 to your computer and use it in GitHub Desktop.
Save joequery/1160252 to your computer and use it in GitHub Desktop.
Download ZIP
"Toggling" Tables
Raw
gistfile1.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment