[ACCEPTED]-How to hide parts of HTML when JavaScript is disabled?-noscript

Accepted answer

Score: 53

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

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

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

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

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

Score: 10

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

Score: 6

~~here's a video tutorial on how this can be done with jQuery: http://screenr.com/ya7~~

Code:

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

And then just hide the relevant elements 3 under body.noscript accordingly.

edit However, JQuery might 2 be bloated for a small fix like this one, so 1 I suggest Zauber Paracelsus' answer since it does not require JQuery.

Score: 3

By the way, is it worth the effort nowadays?

Yes, it's 15 worth worrying about accessibility. You 14 should use progressive enhancement where 13 possible, i.e. make a basic version that 12 works without scripting and then add the 11 scripting functionality on top of it.

A simple 10 example would be a pop-up link. You could 9 make one like this:

<a href="javascript:window.open('http://example.com/');">link</a>

However, this link wouldn't 8 work if someone, say, middle-clicked or 7 tried to bookmark it, or had scripts disabled 6 etc. Instead, you could do the same thing 5 like this:

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

It's still not perfect, because 4 you should separate the behavior and structure 3 layers and avoid inline event handlers, but 2 it's better, because it's more accessible 1 and doesn't require scripting.

Score: 1

The jQuery way:

$(document).ready(function(){
    $("body").removeClass("noJS");
});

Pseudo CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

HTML

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

Score: 1

If the content only makes sense when JavaScript 13 is enabled, then it should be inserted by 12 the JavaScript code directly rather than 11 being rendered. This could either be done 10 by simply having HTML templates as strings 9 within your JavaScript code, or using Ajax 8 if the HTML is more complex.

As mentioned by Reinis I. this is 7 the idea of Progressive Enhancement.

Regarding the CSS techniques 6 of using a class name on the body tag, I 5 would advise doing this the other way around 4 and adding a 'js-enabled' class to the body tag with 3 JavaScript that would alter the page CSS. This 2 fits in with my above comment about keeping 1 all initial HTML 'non-JavaScript friendly'.

Score: 0

You could edit the HTML of the page with 1 Javascript

document.querySelector('div').style.display = 'block';

div {
  display: none;
}

<div>Div</div>

Try it with JS and the without JS.

Score: 0

This makes the content inside the div inaccessible 3 without JS but with JS it adds the content 2 into the div with JS and you can also do 1 that with the CSS. To change the CSS add:

document.querySelector('style').innerHTML = 'div{}';

document.querySelector('div, #div').innerHTML = 'Div';

<div id='div'></div>

Source: stackoverflow.com

[ACCEPTED]-How to hide parts of HTML when JavaScript is disabled?-noscript

Is an image within a noscript tag only downloaded if Javascript is disabled?

Access Contents of <noscript> with Javascript

How to wrap <noscript> tag to hide content when javascript disable

How to detect which one of the defined font was used in a web page?

jQuery / Javascript replace <space> in anchor link with %20

Creating heatmaps using <canvas> element?

Why would I put an ID on a script tag?

HTML input box without a form

Google Maps API v3: InfoWindow not sizing correctly

How do you make something to appear slowly on a page using Javascript?