Question

I have a div that needs to be hidden by default. It then can be toggled by a button:

    <script type="text/javascript">
        function toggle() {
            text = document.getElementById('add_view');
            var isHidden = text.style.display == 'none';
            text.style.display = isHidden ? 'block' : 'none';
        }


        $(document).ready
    (

              function () {
                  toggle();
                  $("#add_view, #btnToggle").click(function (e) {
                      e.stopPropagation();
                  });
                  $(document).click(function () {
                      toggle();
                  });
              }
    );


</script>

It is working fine. The only problem is, when I refresh the page, I momentarily see the div before it is hidden.

What could I do to prevent that?

Thanks

Answer 1

You probably need to hide your element by default, and then use the button to toggle visibility. Try this:

<div id="add_view" style="display:none">....</div>