View Full Version : Toggle display

06-04-2006, 12:12 AM
I'm using some javascript to toggle the display of HTML text. When a heading is clicked text appears beneath, second click hides the text.

I would like to find a way to have some of the text displayed when the page loads and other text elements hidden. ie. first state for chosen elements is hidden or displayed.

Could someone tell me which variables(?) of the script I need to change. I have tried changing the true and false values for the 'sub' ids, but without success. (Like a few web designers I use javascript but can't understand the code!)

Any help appreciated.

Here it is:

var toggledDisplay = new Object();
toggledDisplay['sub1'] = true;
toggledDisplay['sub2'] = true;
toggledDisplay['sub3'] = true;

function toggleDisplay(bDisplayed)
if(!document.getElementById || toggleDisplay.arguments.length < 2) return;
var displayed = new Object();
displayed['true'] = 'block';
displayed['false'] = 'none';
for(var i = 1; i < toggleDisplay.arguments.length; i++)
oDisplay = document.getElementById(toggleDisplay.arguments[i]);
oDisplay.style.display = displayed[bDisplayed];
// begin mozilla browser hack
oImages = oDisplay.getElementsByTagName('IMG');
for(var j = 0; j < oImages.length; j++)
oImages[j].src = oImages[j].src;
// end mozilla browser hack
if(typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;

This goes in the HTML:

toggleDisplay(false, 'sub1', 'sub2', 'sub3');
toggleDisplay(true, 'toggleAll');