How to hide or show a div

Question

I have on my Page_Load registered this

 Page.ClientScript.RegisterStartupScript(this.GetType(), "clientscript", "document.getElementById('showdiv').style.visibility = 'hidden';", true);

But its not getting hidden... My div is as shown below

<div id="showdiv">
   <input class="button" type="button" value="OK" name="success_button" id="my button"  onclick="javascript:window.close();" />
   </div>

what am I doing wrong?. Thank you for your help

Answer 1

I highly recommend doing this simple client side manipulation (show/hode rows controls, etc.) with JavaScript or even more easily with a .js library like jQuery. After you include the jQuery scripts in your application, this is all you need to do to have that DIV be hidden after the page has completed its initialization.

Include this script section at the top of your page or in a referenced .js file if you already have one:

<script type="text/javascript">

 //$(document).ready is used to define a function that is guaranteed to be called only after the DOM has been initialized.
 $(document).ready(function () {
    //Hide the div
    $('#showdiv').hide();
    //conversely do the following to show it again if needed later
    //$('#showdiv').show();
 });

</script>

jQuery API documentation on this method:
http://api.jquery.com/hide/

Answer 2

Why not use an asp:Panel server tag?

Front End:

<asp:Panel runat="server" ID="ShowDiv">
...
</asp:Panel>

Back End:

ShowDiv.Visible = false;

The Panel control will be rendered as a <div> at runtime. This seems cleaner to me than registering a client script.