Hi there,

I am completely new to Javascript, but am keen to learn it.

I have some JS code complete with some XHTML that allows the element associated with id="toc" in this case a table, to expand and close on a click of the text, 'hide' or 'show'. The JS has been taken from another site, and my aim is just to play around with it, to help me understand and learn JS.

Currently, as I understand it, the two lines :-

function toggleToc() {
	var toc = x=document.getElementById('toc').getElementsByTagName('ul')[0];
is a kind of document structure which tells the remaining JS to collect and gather the 'ul' tag within id="toc".

When I was playing around with it the other day, I added another ul into my XHTML, expecting this secondary ul to hide and close just like my first ul - however this doesn't happen. Am I right in suggesting that I need to loop the variable somehow for the JS to effect multiple uls within id="toc"? If so, how would I loop it?

I also tried adding other elements such as p tags within id="toc" and obviously the JS didn't affect these elements - how would I go about getting JS to affect other elements too? I guessed at this by adding another getElementsByTagName to the variable, but this didn't work - perhaps I formatted it wrong? Am I on the right tracks?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>AIRMILES - Welcome to the UK's longest running travel loyalty scheme.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="box.js"></script>



<h1 class="firstHeading">Great test</h1>
			<h3 id="siteSub">From MDC</h3>
			<div id="contentSub"></div>


<table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents - this is a test</h2></div>

<li class="toclevel-1">This is a test</li>
<li class="toclevel-1">This is a test 2</li>
<li class="toclevel-1">This is a test 3</li>
<li class="toclevel-1">fjfjfjd</li>
<li class="toclevel-1">jcklcocldld</li>
<li class="toclevel-1">kdkfodleld dlse</li>
<li class="toclevel-1">kdidoeld dlsps;w</li>
<li class="toclevel-1">idkdieldld slspw;w</li>
<li class="toclevel-1">jfkfkd sldsldod</li>
<li class="toclevel-1">foffld d0dloele</li>
<li class="toclevel-1">pdpd ddo43dps sw</li>
<li class="toclevel-1">kdld eoeldld eod sl kd dls sow ssld eafe dkd=e eiewfwekf fk fkew dla fleww- fewl0= rekw0-f 324 r3 fd3wdf  kdwqe[]	 cdkwq ekdkdkwo fkfkf  dldoe;e ;dlewpsw;s  s</li>
<li class="toclevel-1">odld eodls so0ewls s;ls</li>
<li class="toclevel-1">pss 3pdsla w0q w;ls a</li>
<li class="toclevel-1">osd sow lds s0wlw  cs</li>
<li class="toclevel-1">ldl dleld dod</li>

<li class="toclevel-1">odld eodls so0ewls s;ls</li>
<li class="toclevel-1">pss 3pdsla w0q w;ls a</li>
<li class="toclevel-1">osd sow lds s0wlw  cs</li>
<li class="toclevel-1">ldl dleld dod</li>

<script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script>

<h1>Hello my name is James</h1>
<p>My name is James and thgis is woring really well. This is a test to see if my attempt at the getElementsByTagName js function works OK</p>

JS :-

function showTocToggle() {
	if (document.createTextNode) {
		// Uses DOM calls to avoid document.write + XHTML issues

		var linkHolder = document.getElementById('toctitle');
		if (!linkHolder) {

		var outerSpan = document.createElement('span');
		outerSpan.className = 'toctoggle';

		var toggleLink = document.createElement('a');
		toggleLink.id = 'togglelink';
		toggleLink.className = 'internal';
		toggleLink.href = 'javascript:toggleToc()';


		linkHolder.appendChild(document.createTextNode(' '));

		var cookiePos = document.cookie.indexOf("hidetoc=");
		if (cookiePos > -1 && document.cookie.charAt(cookiePos + 8) == 1) {

function changeText(el, newText) {
	// Safari work around
	if (el.innerText) {
		el.innerText = newText;
	} else if (el.firstChild && el.firstChild.nodeValue) {
		el.firstChild.nodeValue = newText;

function toggleToc() {
	var toc = x=document.getElementById('toc').getElementsByTagName('ul')[0];

	var toggleLink = document.getElementById('togglelink');

	if (toc && toggleLink && toc.style.display == 'none') {
		changeText(toggleLink, tocHideText);
		toc.style.display = 'block';
		document.cookie = "hidetoc=0";
	} else {
		changeText(toggleLink, tocShowText);
		toc.style.display = 'none';
		document.cookie = "hidetoc=1";
Any help, as alwayys is much appreciated

Kind Regards