Home/ Questions/Q 6068369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:42:28+00:00

When I makes sites that have javascript that manipulate the page, and this manipulation

  • 0

When I makes sites that have javascript that manipulate the page, and this manipulation occurs on page load, I often get a nasty flicker effect.

For instance if I had an accordion, the full content would need to be loaded as html, and then once loaded it could be wrapped up with javascript. This means that for a moment the full content is visible, and then it ‘flickers’ as some of it is hidden.

One solution would be to hide any flickering content with css, and then show it (as necessary) with the javascript. The problem is then the page wont work properly for people with no javascript.

Is there a better way?
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the normal approach to this is to add a ‘js’ class to body as soon as possible:

    <!doctype html>
...
<body>
<script>document.body.className='js';</script>

    You’d then adopt some CSS rules to ensure content was hidden when JS is available, something like.

    .js .accordion:nth-child(n+1) { display: none }
    • 0