I tried to find the best solution, on the Google there isn’t a lot of information about good practice in JavaScript, however I think that I know how to do this best. I show you few solutions; unaccessible, bugged and accessible solutions.

The Goal

On the page div #book must be visible with JavaScript turned off and not hiding with flickering (blinking) when JavaScript is turned on. After clicked on the headline #book must be showed by JavaScript.

The page without any scripts and hiding CSS – example 0.

Really bad, however not flickering

The part of the page, that should be showed by JavaScript is hiding by CSS.

CSS code:

#book {
 display: none
}

When JavaScript is on we can show hidden part by mouse click.

JavaScript code:

$(function() {
$('h2').click(function() {
 $('#book').show();
 });
});

When JavaScript is off, the #book is never visible. That solution is not acceptable. Example 1.

Accessible but flickering

Second solution is really simple and accessible, but during hiding parts of content then blinking is appreciable.

Just add hiding class by JavaScript, that you have guaranty when JavaScript is off anyone can see content.

JavaScript code:

$(function() {
 $('#book').addClass('javascript);
  $('h2').click(function() {
   $('#book').show();
  });
});

CSS code:

.javascript {
 display:none
}

View example 2.

Accessible but document.write

Yes, that example is accessible but… Always is but. The problem is in document.write. I think you know what’s going on with it. Maybe in this case we can use document.write? I’m really confused at this point. Unfortunately, when we write something with document.write it will not work when we serve it as application/xhtml+xml.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

document.write('<style type=\"text/css\" media=\"screen\">
 #book{display:none}
</style>');

View example 3.

Accessible, better than previous, but…

I hate buts! That example is accessible but to valid this page with any version of HTML or XHTML you have to extend DTD, really.

JavaScript code:

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

#book {
 display:none
}

CSS code:

<noscript>
 <style type="text/css" media="screen">
 #book {
  display:block
 }
</style>
</noscript>

The problem of that case: We need to put style inside the noscript tag to show the content when JavaScript is off. We cannot put style tag inside body and we can put noscript tag only inside body tag, disaster…

View example 4.

The winner!

documentElement.className If it is a holy grail of my search? It looks like.

I did not observe any delay during hiding content using this method. Even of a huge page.

How it works? We added class to html tag by JavaScript. Next, each element that should be hidden when JavaScript is turned on, preceded by the class and add to it display:none or something like this. That’s all.

JavaScript code:

document.documentElement.className += " js";

$(function() {
 $('h2').click(function() {
  $('#book').show();
 });
});

CSS code:

.js #book {
 display:none;
}

View example 5.

To test these examples you can reload it few times to see flickering effect. To show the hidden content, click at headline Wojciech Bednarski’s favorite book.

Design looks something like this:

Related articles (blue one on image) are exactly the same as related article again from right on the article content. Similarly useful external links under the article content are repeated on the right of article content.

So, What is the best way to do this? I see two solutions:

1. Generate twice each of the section in XHTML code (by back-end code)
2. Generate only once time section which will be repeat and copy them via JavaScript

Both solutions are not so good, but if we have got bad design and we don’t have any possibilities to change it (for example client is to decide on), we must choose solutions.

Why the first is bad?

1. Double content in XHTML code
2. Accessibility (obstruct browsing from mobile, screen reader has to read the same content again)
3. SEO (to much the same words in code or something other reason to worse SEO)
4. We don’t have possibilities to add any semantic relations between section in code (XHTML is restricted in this case)

Why the second is bad?

1. Client has to rendering scripts (performance)

I think, the second is better than the first. If you have any ideas leave a comment.

At present you may watch my design here.

I called this design Our House, because everything getting started from the picture named that same. Thanks Arnie Mateo for great picture and inspiration.