jQuery Question
hide table with clicking button
I can show a table with a link label with following codes with jquery.
$(document).ready(function()
{
$("#show").click(function()
{
$("#table").show();
});
});
but when i want to do this for a button it will show the table for a second then it will be hidden. these are the codes for the button :
$(document).ready(function()
{
$("#button").click(function()
{
$("#table").show();
});
});
Update :
$(document).ready(function()
{
$("#table").hide();
$("#button").click(function()
{
$("#table").show();
});
});
Here are the codes :
<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>
Answer
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.
Source (Stackoverflow)