Visible jump before js runs

Question

Hi, I've written a script that takes an unordered list and turns it in to an accordion. As the page loads I notice that before the JS has run the list still shows as normal for a second or two and then is formatted in to the accordion by the js. I can't edit the CSS to hide the list and the show it once js loads because I want to provide an alternative for users without js.

I'm running the function on page load.

Is there anything I can do in this situation? I can't think of a good way to resolve it.

Answer 1

That is because $(document).ready() waits for the HTML to be rendered before executing the code inside.

You could potentially move your accordion init to be RIGHT after the <ul>

i.e.

<ul class="accordion">
   <li>Accordion Item</li>
   <li>Accordion Item</li>
</ul>
<script type="text/javascript">
    $(".accordion").accordion();
</script>