Controls are appearing and then disappearing in javascript pageload function
<p>I'm having an aspx page with server side controls like textbox, dropdownlsit etc. I need to hide all these controls during initial page load.</p>

<p>Whenever user selects any value from other dropdown, then i need to populate the invisible controls accordingly. Everything is fine, But at the time of loading these hidden controls are appearing like flash and then disappearing which is not good for the client. Can anyone please help me out resolving this, I'm using JQuery document.Ready function to handle this.. Below is the code..</p>

<pre><code>var ispostBack =false;
function pageLoad() {
    $(document).ready(function () {
        HideCtrls();
//Some other code here
     }

function HideCtrls()
{
    document.getElementById("cph1_divSear").style.setAttribute('display', '')
    if (document.getElementById("cph1_txtSearch"))
    {
        document.getElementById("cph1_txtSearch").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtkey").style.setAttribute('display', 'none')
        document.getElementById("cph1_hypProjNo").style.setAttribute('display', 'none')
        document.getElementById("cph1_ddlSeaSingle").style.setAttribute('display', 'none')
         document.getElementById("cph1_txtSeaStart").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeaEnd").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeFLike").style.setAttribute('display', 'none')
        document.getElementById("cph1_imgSeaSt").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtSeTLike").style.setAttribute('display', 'none')
        document.getElementById("cph1_imgSeaEnd").style.setAttribute('display', 'none')
        document.getElementById("cph1_txtPersonnel3").style.setAttribute('display', 'none')
        document.getElementById("cph1_ImageButton3").style.setAttribute('display', 'none')
        document.getElementById("likeFID").style.setAttribute('display', 'none')
        document.getElementById("likeTID").style.setAttribute('display', 'none')
        document.getElementById("dtFID").style.setAttribute('display', 'none')
        document.getElementById("dtTID").style.setAttribute('display', 'none')
    }
}

&lt;div id="divSear" runat="server" class="cols4Search"&gt;
                            &lt;span&gt;
                                &lt;asp:TextBox ID="txtSearch" runat="server" Width="350px"&gt;&lt;/asp:TextBox&gt;
                                &lt;asp:TextBox ID="txtkey" runat="server" onblur="ClearHelp()" onfocus="JavaScript:showhelp('Search_1001')"
                                    Width="400px" MaxLength="150"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt; &lt;span style="display: none;"&gt;
                                        &lt;asp:HyperLink ID="hypProjNo" runat="server" Target="_blank" ForeColor="Blue"&gt;View&lt;/asp:HyperLink&gt;
                                    &lt;/span&gt;&lt;span&gt;
                                        &lt;asp:DropDownList ID="ddlSeaSingle" runat="server" AutoPostBack="True"&gt;
                                        &lt;/asp:DropDownList&gt;
                                    &lt;/span&gt;&lt;span id="likeFID"&gt;&gt;=&lt;asp:TextBox ID="txtSeFLike" runat="server" MaxLength="9"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt;
                            &lt;span id="likeTID"&gt;&lt;=&lt;asp:TextBox ID="txtSeTLike" runat="server" MaxLength="9"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt;
                            &lt;span id="dtFID"&gt;&gt;=&lt;asp:TextBox ID="txtSeaStart" runat="server" Width="85px"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt;
                            &lt;span&gt;
                                &lt;asp:ImageButton ID="imgSeaSt" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /&gt;&lt;/span&gt;
                            &lt;span id="dtTID"&gt;&lt;=&lt;asp:TextBox ID="txtSeaEnd" runat="server" Width="85px"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt;
                            &lt;span&gt;
                                &lt;asp:ImageButton ID="imgSeaEnd" runat="server" CssClass="dateicon" ImageUrl="~/Images/date_icon.png" /&gt;&lt;/span&gt;
                            &lt;span&gt;
                                &lt;asp:TextBox ID="txtPersonnel3" runat="server" CssClass="textbox" onblur="ClearHelp()"
                                    Width="160px" onfocus="JavaScript:showhelp('AdminUserDetails_1001')"&gt;&lt;/asp:TextBox&gt;&lt;/span&gt;
                            &lt;span&gt;
                                &lt;asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/searchtool.png"
                                    ToolTip="Select User" CssClass="iconalign" /&gt;&lt;/span&gt;
                            &lt;br /&gt;
                            &lt;asp:Label ID="lblNote" Visible="false" CssClass="Notelabel" runat="server" /&gt;
                        &lt;/div&gt;
</code></pre>
