CODEWITHSUNDEEP
jquery
Ali Vojdanian
Ali Vojdanian

Reputation: 2111

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>

Upvotes: 1

Views: 9397

Answers (3)

Sheeba Nancy
Sheeba Nancy

Reputation: 65

Just use these the if statement here.

0"> and then your table tags go here. We can use the above javascript, however, If the submit button has got some action to do it wont know which action to be called.. to hide table or to perform the task given after submitting the button. So use the above if statement. It worked like a charm for me ! :)

Upvotes: 0

esqew
esqew

Reputation: 44699

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table:hidden").show();
        $("#table:visible").hide();
    });
});

or alternatively:

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").toggle();
    });
});

EDIT As specified in your comment:

$(document).ready(function()
{
    $("#button").click(function()
    {
        $("#table").show();
        setTimeout(function()
        {
            $("#table").hide();
        }, 2000);
    });
});

The table will appear for 2000ms (2 sec) and hide afterwards.

Upvotes: 1

Dan Barzilay
Dan Barzilay

Reputation: 4983

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.

Upvotes: 4

Related Questions