Hiding element before document is ready?

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

don't forget to mark one of the answers as correct if you're happy with any — Rui Jarimba, Feb 05 '13 at 20:04

score 10 · Accepted Answer · answered Feb 05 '13 at 19:05

10

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>

answered Feb 05 '13 at 19:05

Rui Jarimba

9,732
10
46
74

It's quite frustrating to be the first to answer a question and have less points than the others – Rui Jarimba Feb 05 '13 at 19:14
Thanks @RobertNiestroj, this happens a lot of times here in SO. If 2 answers are the same, I only upvote the first one to give the answer, I think this way it's fair. You can easily see the exact answer time by hovering on the part that says: `answered xx mins ago` – Rui Jarimba Feb 05 '13 at 19:36
Did not knew that with the exact time – Robert Niestroj Feb 05 '13 at 20:29

score 8 · Answer 2 · answered Feb 05 '13 at 19:05

8

Make the element hidden in your html to begin with.

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

answered Feb 05 '13 at 19:05

Stephen

4,242
30
32

score 1 · Answer 3 · edited Mar 14 '13 at 09:40

1

Initially, you have to hide it by setting style="display:none;" of the div. Once when u want to toggle it, you have to use it as

document.getElementById(Id).style.display="";

in javascript.

edited Mar 14 '13 at 09:40

Aleksandr M

23,647
12
63
129

answered Mar 14 '13 at 09:20

user2168290

11
2

Hiding element before document is ready?

3 Answers3