Hide Div Control on Page Load

Question

$(function () {
        $("#divLimitPrice").hide();
        $('#divLimitPrice').hide(); //even tried it with ''
    });

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server"></asp:TextBox>
 </div>

My understanding is that this is supposed to work..... it wants to fight me. Any way to beat it into submission? Thanks all! - G

Answer 1

It will flicker if you use JS as the script has to load first which means until it's loaded the div will remain visible on the DOM.

The easiest way to do this is to give your div a CSS class of display none like following. That way when the page is loaded it will already be hidden.

<div id="divLimitPrice" class="hide-div">Limit Price<br />

 hide-div { 
     display: none;
 }

When you need it to be shown you can use jQuery as follows:

$('#divLimitPrice').removeClass('hide-div')

Hope this helps.

Answer 2

Try this:

 <div id="divLimitPrice">Limit Price<br />
 <asp:TextBox ID="txtLimitPrice" runat="server"></asp:TextBox>
 </div>
<script>
    $(function () {
            $("#divLimitPrice").hide();
        });
</script>

I think your problem is the JS is executing before the page loads.

Answer 3

Try this:

$(document).ready(function(){
  $("#divLimitPrice").hide();
});