Preventing delay from hiding long list of elements with javascript?

I am building a sort of tree view in javascript with items that can be expanded and collapsed (with default being collapsed).

The problem is the page can get very large, and the user sees the the browser render the list with all the items expanded, and then sees them all collapse after half a second.[/quote]

You could use a setInterval in the head section that’s on a tight loop, that waits and watches for the tree, then hides it and removes the setInterval process.

I would recommend simply using CSS “display:none;” to hide all items that you want to be hidden initially. This does, however, make the assumption that your site requires javascript, as in the case that users don’t have javascript enabled they won’t have a way to expose these initially hidden elements.

A less elegant, but non-javascript supporting method would be to put <script> tags through your menu directly after each hidden element in your list, with javascript that hides the element. i.e. $(‘#<id>’).hide()

I use a scrollable area with the scrollbar hidden by its container. You can then use anchors and targets to bring the area into view, with javascript to enhance it. I use it in my menu and ads/media/calendar section of the link in my sig.

For me that was the only way I could get the same result with or without javascript and to work the same in all browsers