Home/ Questions/Q 8500325
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:54:51+00:00

I can show a table with a link label with following codes with jquery.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0