How to delay the display of some HTML until after javascript has loaded

Question

When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?

Here's the code that I borrowed from the answer linked above:

CSS:

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

HTML:

<div style="display: none" id="hideAll">&nbsp;</div>

Javascript

 window.onload = function() 
     { document.getElementById("hideAll").style.display = "none"; }

<script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script> 

Answer 1

I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:

<style type="text/css">
    #javaScriptAccordion {
        display: none;
    }
</style>

And then use the noscript tags (in the head) to amend this in the absence of JavaScript:

<noscript>
    <style type="text/css>
        #javaScriptAccordion {
            display: block;
        }
    </style>
</noscript>

This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.

The above has been amended to prevent the 'flash of no content' (as described by @Josh3736 in his answer), and now uses opacity to hide the content:

<style type="text/css">
#elementToShowWithJavaScript {
    opacity: 0.001;
    width: 50%;
    margin: 0 auto;
    padding: 0.5em;
    border-radius: 1em 0;
    border: 5px solid #ccc;
    }
</style>
<noscript>
<style type="text/css">
    #elementToShowWithJavaScript {
        opacity: 1;
        }
</style>
</noscript>

Live demo.

I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.