Div loads and disappears on asp.net PageLoad

I have a div that I want to appear based on user input (works), however this div will appear and then hide itself on page load, because the javascript simply tells this Div to appear based on user input , and the input is defaulted to the option which causes the div to hide. I am including the code

<script type="text/javascript">

    function HideUnhide() {
        if (!$("#RadioButtonInput").attr("checked")) {
            $("#hideableDiv").fadeOut(200);
        } else {
            $("#hideableDiv").fadeIn(200);
        }
    }

    $(function () {
        //initial hide/unhide
        HideUnhide();
        //click triggered hide/unhide
        $(".RadioButtonID > input").click(
            function (event) {
                alert('click');
                HideUnhide();
            }
        );
    });

The RadioButton is binded to a S开发者_如何学PythonQL value in the website which stores session data, so it can't just "always be hidden" when the page loads, but it's visually annoying to watch this div be present and then disappear based on the data binding.

How can I fix this?

In the server side code that writes out the HTML for the div, test the SQL value and if it should be hidden, then add a style attribute of style="display:none" to the HTML.

You will have to set the initial visibility on the server side. Set the div to runat="server", and right after you set the Checked property of the button, do this:

myDiv.Style.Add("display", (myButton.Checked ? "block" : "none"));