Visibility does not work

Question

So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work

<table style="visibility:hidden;" id="viewevade">
        <tr>

        <td  class="form"width="25%">Period</td>
        <td  class="form"width="75%"> PeriodA </td>
    </tr>
    <tr>
        <td class="form">Inbound Call Date</td>
        <td class="form">Date</td>
    </tr>
    <tr>
        <td class="form">Input Date</td>
        <td class="form"> DateA</td>
    </tr>

    <tr>
        <td class="form">Reviewer</td>
        <td class="form">username</td>
    </tr>
    <tr>
        <td class="form">Topic</td>
        <td class="form">Topic A</td>
    </tr>

    <table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
    <tr>
    <td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>

and I make a function:

function ViewEva()
{

document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}

to use it in

 <button width="100%" onclick="ViewEva();">View Evaluation</button></td>

It doesnt work. Any help? Thanks b4

Answer 1

I created this as a codepen here:

http://codepen.io/anon/pen/pjZMrO

Using your function:

function ViewEva()
{

document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}

It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?

EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.

<form action ="" method="post" onsubmit="">