[Solved] Make information available when JavaScript disabled

Question

There are a couple of decent methodologies you can employ.

Generally to enable content to be seen by non js users, it should all be set to be shown in the css, and only hidden when js is enabled. This means all of the content can be read and indexed (this is also good practice for people who use screen readers).

To add this technique you can add a tag to your html or body

<html class="no-js">

And then in your javascript have this class removed. jquery example:

$('html').removeClass('no-js');

This is something modernizr employs. This then allows you to write different css for js and non js users.

A crude example:

body { background:#EEE; }

.no-js body { background:#FFF; }

And so on.

EDIT

Have you tested your code with js disabled? As there is no css in your example it might actually work properly.

Another technique that might help your code would be to make the h2’s anchor tags and have them display the linked content via jquery but for non-js users have them jump to the relevant section via an id tag, like a bookmark. I will try and make a fiddle soon.

OK have a look at this fiddle: http://jsfiddle.net/lharby/w2mkem8k/

This is the new js.

$(".hidden").hide(); 
$("a").on('click', function(){
  var id = $(this).attr("href");
    $('.hidden').hide();
    $(id).show();
      return false;
  });

I have turned the h2’s into anchors. If you disable javascript all of the content is visible and the links jump to the appropriate sections.

Accepted Answer