I'm trying to create a page that contains a table that is hidden initially (on page startup). Later, when a link is clicked, the table should show permanently. The problem I am having, however, is that when I click on the link, the table shows for a second and then dissapears again. Below is the code:

        <script type="text/javascript">
var n=0;
<body onload="tableOff('myTable')">

        <!-- Extend/Collapse Tables Script -->
        <script type="text/javascript">
            function tableOff(Object) {
                              if (n==0) {

                function tableOn(Object) {
                    if (n >=1) {
        <!-- Extend/Collapse Tables Script -->

<table id="myTable">
My Table

<a href="this.jsp" onClick="tableOn('myTable')">Click Me</a>


I know incrementing a variable may not be the most efficient way, but for now if I can get that to work then it will be easy to change that to boolean at a later stage...

Hi Ashton,

in the <head> section of your page, you may apply this format:

<script type="text/javascript">
// Basic Sample

var tableOn = function( obj ) {
   document.getElementById( obj ).style.display = "table";

onload = function() {
document.getElementById("myTable").style.display = "none";
// -->

do the same instance as you call your tableOn( tableID ) function... <a href="javascript:void(0);" onclick="tableOn('myTable');">Show Table</a>