JavaScript
Article

Use CSS to Hide Content when JavaScript is Turned Off

By Sam Deering

Use CSS to Hide Content when JavaScript is Turned Off

This is a tip first seen by Karl Swedberg in one of this jQuery books where you can add a JS class to your HTML attribute when jQuery has loaded like so:

$('HTML').addClass('JS');

Then by using CSS to initially hide the elements, like this:

.JS #myDiv{display:none;}

They will only appear when JavaScript is enabled.

It is also worthy to note that altough JS can be turned off you will still be able to see the HTML markup(and search engine spiders also see this!). But nevertheless, a nifty little trick!

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.