javascript and css in asp.net

Question

i am moving an application into asp.net with c#, which has some javascript in it already.

i have the following javascript function:

function toggle(id) {
    var tog = document.getElementById(id);
    if (tog == null) { return; }
    var bExpand = tog.style.display == '';
    tog.style.display = (bExpand ? 'none' : '');
}

and i am calling it <a href="javascript:void(0);" onclick="toggle('programinfo');" class="nobold">[-]</a> <a href="javascript:void(0);" onclick="toggle('programinfo');" class="nobold">[-]</a>

as you can see, the only thing it does is toggle the display property from none to blank, making the id 'programinfo' show or not show accordingly.

coming from coldfusion it worked perfectly, i just had a div named programinfo and it would display or not display the contents of the div each time the link was clicked. now however, it doesn't do anything. if i add an alert on the value tog.style.display it does either show a blank value, or the value none, so i know it is getting the value, however it is no longer flipping the value.

i have tried it on both divs and tables, nothing. then i even tried adding a style="display:none;" attribute to the table by default to get it to disappear, but even that still doesn't work.

my only guess at this point is that it's something with asp, but i can't find it anywhere so i'm not sure. does anyone have any ideas? thanks.

edit - by request the html output to the browser:

<table width="100%" border="0" class="dgbc" cellspacing="0" cellpadding="5">
    <tr>
        <td colspan="12" class="section_header" style="background-repeat:no-repeat;background-image:url(images/tms_side1.jpg);margin:0;background-position:right;">
            <span style="float: right;"><a href="javascript:void(0);" onclick="toggle('programinfo');" class="nobold">[-]</a></span>
            PROGRAM INFO
        </td>
    </tr>
    <tr>
        <td valign="top">
            <table width="100%">
                <div id="programinfo" style="display:none;">
                    blah blah blah
                </div>
            </table>
        </td>
    </tr>
</table>

Answer 1

I Think I problem you are facing is invalid use for HTML tags.

            <table width="100%">
                <tr>
                    <td>
                        <div id="programinfo" style="display: none;">
                            blah blah blah
                        </div>
                    </td>
                </tr>
            </table>

Place the Div tag inside the td and tr. You will get the problem resolved. This problem persists in IE6 and IE7. Hope this helps.

Answer 2

If you are starting with "display:none" , and then switching the display to blank, what would make it show up? Is there a "display:block" in the CSS? Could you try switching the display to 'block' instead of nothing?