View Full Version : Toggle content script: content shown when JavaScript is off

07-21-2007, 01:04 PM
I use a small piece of JS code to make different elements on the page show/hide when clicking a link, based on id:

function toggle( targetId ){
if (document.getElementById){
target = document.getElementById( targetId );
if (target.style.display == "none"){
target.style.display = "";
} else {
target.style.display = "none";
Then HTML looks like this:

<a href="#" onClick="toggle('news'); return false;">Show/hide news</a>
<div id="news" style="display:none">BlahBlahBlah</div>
This works. Initially the element is hidden (with style="display:none" property of the element), and the script gets its id and changes its display property to "block" when clicking on a link.
But when Javascript in a browser is turned off, the elements to show are all hidden, and there's no way to see the content of the element.
My question: is there a way to hide toggled elements on page load with JS, so that when it's turned off the hidden content is shown?
Any help would be appreciated)

07-21-2007, 01:10 PM
Just javascript to set their initial display.

window.onload = function()
That is okay if you only have a few divs you need to hide but if you a lot of them then using a class on them would be better because then you could do something like this

window.onload = function()
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
if(divs[i].className == 'hideme')
divs[i].style.display = 'none';
Then the div would look like

<div class="hideme"></div>

Bill Posters
07-21-2007, 01:26 PM
As pointed out, any content which starts out hidden and which can only be made visible via js, should be hidden using js too.
Additionally, any element which is there solely to support a js function (such as your toggler) should be added via js.


<html lang="en-GB">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">

body.hasJS .hide {
display: none;

<script type="text/javascript">

window.onload = function() {



function hasJS() {

var bodyEl = document.getElementsByTagName('body')[0];
bodyEl.className += (bodyEl.className) ? ' hasJS' : 'hasJS' ;


function createToggle() {

if (!document.getElementById('toggleHolder')) return;

var tHolder = document.getElementById('toggleHolder');
var toggle = document.createElement('a');
toggle.href = '#';
toggle.onclick = function() { toggleFunc('news'); return false; }
toggle.appendChild(document.createTextNode('Show/Hide news'));



function toggleFunc(targetId) {

if (!document.getElementById) return;

var trgt = document.getElementById(targetId);
trgt.className = (trgt.className == 'hide') ? '' : 'hide';


<div id="toggleHolder"></div>

<div id="news" class="hide">Blah Blah Blah</div>


07-21-2007, 03:39 PM
Thanks for your fast reply.
The last script matches perfectly in the case when there's only one element on the page to be hidden, but i unfortunately have many of them on one page, and the text of the link is different in each case ("Show the news", "+", "Search")... Then, there are cases like this:

<div id="search"><a href="search.html" onclick="toggle('search_form'); return false;">Поиск</a></div>
When JS is on, clicking on the link makes a search form appear; when JS is off, it loads a standalone search page. Thus it is needed also in JS-is-off state.

And the _Aerospace_Eng_'s script only problem is that there are not only 'div' elements which should be hidden but also 'ol', for example. When 'div' is replaced with '*' in "document.getElementsByTagName(...)" expression, it works perfectly but only if there was no class assigned before to the element.
Is it possible to hide the elements without changing the HTML code (adding classes etc.), only on the base of the link with onClick assigned?
Thanks in advance

Bill Posters
07-21-2007, 04:17 PM
function toggleFunc(targetId) {

if (!document.getElementsByTagName) return;

var els = document.getElementsByTagName('*');
for (var i = 0, tEl; tEl = els[i]; i++) {
if (tEl.className && tEl.className.indexOf('special') != -1) {
tEl.className = (tEl.className.indexOf(' hide') != -1) ? tEl.className.replace(' hide','') : tEl.className+' hide';

<div id="toggleHolder"></div>

<div>1: Blah blah blah.</div>

<div class="special hide">2: Blah blah blah.</div>

<ol class="special hide">
<li>3: Blah blah blah</li>
<li>3.1: Blah blah blah</li>

<p>4: Blah blah blah.</p>

The items you wish to address should have the class value of special*. The presence (or absence) of a secondary value of hide dictates whether that element is displayed or hidden.

(* You can change special to anything you like, but try to use class with semantics in mind (http://www.w3.org/QA/Tips/goodclassnames). Be sure to reflect any class name changes in both the markup, CSS and the js.)

The above example is a little rough and ready, but it should be sufficient to demonstrate the principles of how you can address and alter multiple elements in one go.

07-21-2007, 06:07 PM
Thanks for the useful script:thumbsup: