Skip to main content

Use CSS to Hide Content when JavaScript is Turned Off

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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!

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad