How to hide parts of HTML when JavaScript is disabled?

javascript html noscript
z-boss picture z-boss · Oct 16, 2009 · Viewed 17.4k times · Source

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

Zauber Paracelsus picture Zauber Paracelsus · Dec 13, 2012

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.

Related questions

Is there a HTML opposite to <noscript>?

Is there a tag in HTML that will only display its content if JavaScript is enabled? I know <noscript> works the opposite way around, displaying its HTML content when JavaScript is turned off. But I would like to …

Read More
Valid way to add noscript in head for wrapping redirect

So I was thinking a simple way to deal with javascript being disabled by the browser would be the following: <head> <title>JavaScript Test</title> <noscript> <meta http-equiv="Refresh" content="1;url=…

Read More
How can a site instantly detect that javascript has been disabled?

Normally, when a page is loaded, and the browser has Javascript disabled, we use the <noscript> tag to write something like a warning and tell the client to enable Javascript. However, Facebook, even after you load the page …

Read More