document.getElementById("demo").innerHTML = "<span style='color: lime'>Script working CONFIRMED</span>";

// TO DO - make the <dt> italic when any of the <dd> following it are hidden.

// Set up the click handlers:
var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) {
			itemlist[i].onclick = hideable;
}

var itemlist = document.getElementsByTagName('dt');
for (i = 0; i < itemlist.length; i++) {
			itemlist[i].onclick = showable;
}

var itemlist = document.getElementsByTagName('h2');
for (i = 0; i < itemlist.length; i++) {
			itemlist[i].onclick = h2toggle;
}

function showable () {
// When clicking on a <dt> item, show or not all the following <dd> elements
	if (this.style.fontStyle != "italic") {
		this.style.fontStyle = "italic";
	} else {
		this.style.fontStyle = "normal";
	}
	var ddO = this.nextElementSibling;
  while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){
		if (this.style.fontStyle != "normal") {
			ddO.style.display = 'none';
		} else {
			ddO.style.display = 'block';
		}
    ddO = ddO.nextElementSibling;
	}

}

function hideable () {
// When clicking on a <dd> item, show or not itself
	var x = this;
  if (x.style.display != "block") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function h2toggle () {
// When clicking on a <h2> item, toggle the display of absolutely everything
	var itemlist = document.getElementsByTagName('dd');
	for (i = 0; i < itemlist.length; i++) {
		x = itemlist[i]
		if (x.style.display != "block") {
		  x.style.display = "block";
		} else {
		  x.style.display = "none";
		}
	}
	var dtlist = document.getElementsByTagName('dt');
	for (i = 0; i < dtlist.length; i++) {
		x = dtlist[i]
		if (x.style.fontStyle != "normal") {
		  x.style.fontStyle = "normal";
		} else {
		  x.style.fontStyle = "italic";
		}
	}
}