Question

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 SQL 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?

Answer 1

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.