aliboy38 aliboy38 - 5 months ago 13
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>&nbsp; </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.