Hello,

I have a table on my website that lists lots of items. When I click on an item I want to show a row just below the item with all the details.. Everything works on firefox, but in Internet Explorer it just doesn't work. I have this:

Code CSS:
.hiddenImage {display:none;}
.visibleImage {display:table-row;}

Code PHP:
<a name="<?php echo "item" . $itemId; ?>" href="javascript:showItem('<?php echo "item" . $itemId; ?>');" (...)>

the shoItem function is as follows:

Code JavaScript:
var lastItem = null;
 
function showItem(id) {
	x = "item" + '<?echo $selectedItem;?>';
 
	// coming from the menu, not after clicking thumbnail
	if (x == "item") {
		if (lastItem == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem != null) {
				document.getElementById(lastItem).className = "hiddenImage";
			}
			document.getElementById(id).className = "visibleImage";
		}
	}
 
	// coming from clicking a thumbnail
	else {
		if (x == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
				document.getElementById(lastItem).className = "hiddenImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem == id) {
				if (document.getElementById(id).className == "hiddenImage") {
					document.getElementById(id).className = "visibleImage";
				}
				else {
					document.getElementById(id).className = "hiddenImage";
				}
			}
			else {
				if (lastItem != null) {
					document.getElementById(lastItem).className = "hiddenImage";
				}
				document.getElementById(x).className = "hiddenImage";
				document.getElementById(id).className = "visibleImage";
			}
		}
	}
 
	lastItem = id;
}

Can anyone help me? Why isn't this working on Internet Explorer?

Thanks in advance,
Paulo