All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

JavaScript Required Content with Fallback Content

Last updated on:

JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not.

<!-- JavaScript-Required Content -->
<div id="photoslider" style="display:none">Javascript photoslider</div>
<!-- END JavaScript-Required Content -->

<!-- Fallback Content -->
<noscript><div id="photo">Alternative static photo as content when javascript is turned off</div></noscript>
<!-- END Fallback Content -->


  1. Rob Ratcliff
    Permalink to comment#

    This code makes me happy! So simple, but so effective!

  2. stine
    Permalink to comment#

    Nice tip! thanks

  3. Becky
    Permalink to comment#


    You and this site are always coming to my rescue! FYI – I just tried this with a WordPress slideshow. I added the ‘noscript’ tags with a standard image under the slideshow shortcode in the standard editing page and it worked like a charm.

  4. Miles
    Permalink to comment#

    Hi Chris
    I was wanting to use a simple slideshow on a homepage but was concerned about the ‘no javascript available’ scenario. This simple piece of code leaves me with a great first choice image even if the slideshow doesn’t run.

    many thanks for this

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed