I can show a table with a link label with following codes with jquery.
$(document).ready(function()
{
$("#show").click(function()
{
$("#table").show();
});
});
$(document).ready(function()
{
$("#button").click(function()
{
$("#table").show();
});
});
$(document).ready(function()
{
$("#table").hide();
$("#button").click(function()
{
$("#table").show();
});
});
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#table").hide();
$("#button").click(function()
{
$("#table").show();
});
});
</script>
</head>
<body>
<p><a href="#" id="show">Show</a> <a href="#" id="hide">Hide</a></p>
<form id="form1" name="form1" method="post" action="">
<p>
<input type="submit" name="button" id="button" value="Show" />
</p>
<p> </p>
</form>
<table width="515" border="0" class="table1" id="table">
<tr>
<td width="509" class="table1"><img src="Image/Tulips.jpg" width="400" height="400" alt="Tulips" /></td>
</tr>
</table>
Your code works just fine, maybe what you ment is a toggle
here you go: Demo
I just changed .show()
into .toggle()
$(document).ready(function()
{
$("#button").click(function()
{
$("#table").toggle();
});
});
UPDATE:
The problam is that you using type="submit"
on your button which causes the form to get submitted... change it to type="button"
Another way (that keeps the type="submit"
there):
$(document).ready(function()
{
$("#table").hide();
$("#button").click(function()
{
$("#table").show();
return false;
});
});
I added return false;
to prevent the button default action.