I have a website that provides a custom UX experience implemented via
JavaScript. When
JavaScript is disabled in the browser the website falls back to CSS for the layout.
To make this possible I've added a noJS class to the <body> and quickly remove it via
JavaScript.
<body class="noJS layout-wide">
<script type="text/javascript">var b=document.getElementById("body");b.className=b.className.replace("noJS","");</script>
This caused a problem when the page loads and
JavaScript is enabled. The body immediately has it's noJS class removed, and this causes the layout to appear messed up until the
JavaScript code for layout is executed (at bottom of the page).
To solve this I hide each article via
JavaScript by adding a CSS class fix which is display:none as each article is loaded.
<article id="q-3217">....</article>
<script type="text/javascript">var b=document.getElementById("q-3217");b.className=b.className+" fix";</script>
After the page is ready I show all the articles in the correct layout.
I've read many times in Google's documentation not to hide content. So I'm worried that the Google will penalize my website for doing this.
