How to hide parts of HTML when JavaScript is disabled?

Question

I'm trying to accommodate users without JavaScript. (By the way, is it worth the effort nowadays?)

In one HTML file I'd like part of it execute if scripts are on, and another part if scripts are OFF.

The <noscript> tag lets me do the former, but how to achieve the latter? How can I mark a part of HTML so that it is not parsed by browser if scripts are off?

Answer 1

I had been looking around for a way to do this so that I could hide a navigation dropdown menu that gets rendered nonfunctional when javascript is enabled. However, all of the solutions for changing the display property did not work.

So, what I did first was assigned an ID (ddown) to the div element surrounding the dropdown menu.

Then, within the head section of the HTML document, I added this in:

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

And that just worked. No dependency on javascript, jquery, or any other scripting: just pure HTML and CSS.

Answer 2

Default the bits you want to hide as styled as display:none and switch them on with jQuery or JavaScript.