How to hide or show a div

Question

I have registered this on my page_Load

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

But he is not hiding ... My div 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 / manage header elements, etc.) using JavaScript or, even easier, using a .js library such as jQuery. After including jQuery scripts in your application, this is all you need to do to keep this DIV hidden after the page has completed its initialization.

Include this script section at the top of the page or in the .js file that the link refers to, if you already have:

 <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 for this method:
http://api.jquery.com/hide/

Answer 2

Why not use the asp:Panel server tag?

The front of:

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

Rear end:

 ShowDiv.Visible = false; 

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

Answer 3

HTML

  <div id="div1" runat="server"></div> 

FROM#

 div1.Visible=false; 

I think this will work ...

Answer 4

you have 2 options

1-Add the attribute "runat = server" to your div, and then from the code behind its access and make the visibility false or add a style to make it invisible.

 myDiv.Style.Add("display","none"); 

2-Add a javascript function to hide it, and you can use jquery for this.

Answer 5

JavaScript:

 $(document).ready(function(){ $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".slidingDiv").slideToggle(); }); }); 

HTML

 <a href="#" class="show_hide">Show/hide</a> <div class="slidingDiv"> Fill this space with really interesting content. <a href="#" class="show_hide">hide</a> </div> 

CSS

 .slidingDiv { height:300px; background-color: #99CCFF; padding:20px; margin-top:10px; border-bottom:5px solid #3399FF; } .show_hide { display:none; } 

Answer 6

I came here to look for a solution and eventually added "runat = server" to my div and then hid it with code

myDivID.Visible = false;

Answer 7

I think this is another boot order issue.

Your script runs immediately after loading it. If the page element that he is trying to hide is not loading in the DOM while the script is running, then do not hide anything. I believe that registered scripts get to the top of the page, in front of the HTML content, so this will always happen.

For this to work, you must put it in the boot event listener. See: Running javascript code when loading a page without using the onload tag

However, since you are trying to hide a page element without any conditions, you would probably be just as happy if this page element was disabled on the server side by adding a class to the element that your CSS does hide or manipulate your style / visibility directly from server code.

If it is assumed that there is some condition about whether the Div is visible or not, then doing it all on client javascript is probably better, so you do not need to make a trip on the server just to control visibility.

Answer 8

we create a link that calls javascript

  <p><a href="#" class="show_hide" onclick="recoverDiv();">Mot de passe oublié</a></p> 

div to show and hide

 <div id="divdiv" runat="server" class="HideMe"> </div> 

and in javascript add:

 <script type="text/javascript"> function recoverDiv() { $('#divdiv').attr('class', 'ShowMeForced'); } </script> 

and in css:

 <style type="text/css"> .HideMe { display:none; } .ShowMe { display:block; } .HideMeForced { display:none !important; } .ShowMeForced { display:block !important; } </style>