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.

Answer 3

HTML

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

C#

div1.Visible=false;

I think this will work ...

Answer 4

you have 2 options

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

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

2-Add javascript function to hide it and you could use jquery to do it.

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 looking for a solution and ended up adding the "runat=server" to my div then hiding it in code-behind with

myDivID.Visible = false;

Answer 7

I think this is another load order problem.

Your script runs as soon as it's loaded. If the page element it's trying to hide isn't loaded into the DOM at the time the script runs, then there's nothing to hide. I believe the registered scripts all go into the top of the page, before the HTML content, so this will always happen.

To get this to work, you would have to put it in a load event listener. See: Running javascript code on page load, without using the onload tag

That said, since you're trying to hide the page element, without condition, you'd probably be just as happy turning this page element off at the server side, either by added a class to the element that your CSS makes hidden, or manipulating its style/visibility directly from the server code.

If there is supposed to be some condition on whether or not the Div is visible, then doing it all in client-side javascript is probably better, so that you don't have to make a server trip just to control visibility.

Answer 8

we create link calling javascript

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

the 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>