Home/ Questions/Q 7736873
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T07:51:14+00:00

All the answers I could find recommended adding display:none to css… but for a

  • 0

All the answers I could find recommended adding display:none to css… but for a user without javascript, they will never see the element.

jQuery(document).ready(function($){

    $('#toggleElm').hide();

    $('#toggleBtn').click(function(){
        $('#shareLink').slideToggle();
    })

});

still results in an element that appears and disappears during page load because the page begins rendering before the DOM has finished these days.

<script type='javascript'> 
    document.write("<style type='text/css'> #toggleElm {display:none} </style>");
</script>

at the top of the body just seems too hacky.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    to prevent the javascript FOUC and let your page fully accessible you should apply a .no-js class in <html> element and then use that class to style your elements, exactly as html5 boilerplate+modernizr do

    #toggleElm { display: none; }
.no-js #toggleElm { display: block; }

    of course you have to remove that class via javascript soon in the <head> of your document, with a script like this

    <script>
    (function(d) { 
        d.className = d.className.replace(/(^|\b)no\-js(\b|$)/, 'js');
    }(document.documentElement));
</script>

    so if javascript is enabled, it will turn the .no-js class into .js class.

    Using this approach, your page is still accessible even when javascript is not available, because in that scenario the last CSS rule will be applied, leaving your elements visible and accessible.

    • 0