JavaScript - Need To Set Element Visibility Using Switch/case

I'm currently attempting to make a unit conversion tool. I'd like for the user to select which unit to start and which unit to convert too. EX: 1 foot comes out to 12 inches. So far it's not going well.

I have two list boxes, named "firstmeasure" and "secondmeasure". For the purpose of this post we will use only 3 different unit in the list boxes, centimeters, feet, and inches. I also have two text boxes used to show the output and for the user to put in a number to convert. And of course, a button that calls the function (I'd prefer it to do the function automatically, but I'll get to that later).

I'm trying to use variable arrays and using the value of the list box options to define which value the array will use. Then in the function I'm trying to use a switch/case statement to allow it to figure out which numbers to plug into an equation.

My problem is that it seems to automatically go to the last case option regardless of what the list box is.

This is the form that in the HTML file:
Code:

<form action="" name="lengthform" id="lengthform" >
    <p>
      <label >Select first measurement</label>
      <br/>
      <select id="firstmeasure" name="firstmeasure" >
        <option value="1">Centimeter</option>
        <option value="2">Feet</option>
        <option value="3">Inch</option>
      </select>
      <input type="text" id="input" name="input" value="1" />
      <br/>
      <br/>
      <label >Select Second measurement</label>
      <br/>
      <select id="secondmeasure" name="secondmeasure" >
        <option value="1">Centimeter</option>
        <option value="2">Feet</option>
        <option value="3">Inch</option>
      </select>
      <input type="text" id="output" name="output" />
    </p>      
    <input type="button" onclick="calculate()" value="Convert!" />
</form>

This is whats in the Java file:
Code:

 var centimeters1 = new Array() ;
 centimeters1["1"] = "1" ; //centimeters
 centimeters1["2"] = "0.032808399" ; //feet
 centimeters1["3"] = "0.393700787" ; //inches

 var feet1 = new Array() ;
 feet1["1"] = "30.48" ; //centimeters
 feet1["2"] = "2" ; //feet
 feet1["3"] = "12" ; //inches

 var inches1 = new Array() ;
 inches1["1"] = "2.54" ; //centimeters
 inches1["2"] = "0.0833333333" ; //feet
 inches1["3"] = "3" ; //inches

function calculate() {	
var measure1 = document.lengthform.elements["firstmeasure"] ;
var measure2 = document.lengthform.elements["secondmeasure"] ;

var A = document.lengthform.input.value ;
var B ;
var C ;
	switch (measure1.value){	
		case "1" :
			B = centimeters1[measure2.value] ;
			C = A * B
	    	document.lengthform.output.value = C
		case "2" :
			B = feet1[measure2.value] ;
			C = A * B
			document.lengthform.output.value = C
		case "3" :
			B = inches1[measure2.value] ;
			C = A * B
			document.lengthform.output.value = C
	}//end switch
}//end function

So, measure1 reads the value of the first list box, and measure 2 reads the value of the second list box. I tried using a switch case statement instead of writing a ton of if statements. Which I also tried and it gave me the same problem.

If there is a much better way to do a conversion tool, than I would love to learn how. Any help on fixing this seemingly easy problem would be great.

Edit: Do I have to use an "int" variable in the switch statement? I'm using Adobe Dreamweaver and it won't allow to me to create a variable using "int", it just gives me a syntax error.

This has always puzzled me:

Code:

foo="bar";

switch(foo) {
	case "bar": {
		alert("a");
	}

	case 123: {
		alert("b");
	}
}

"a" is displayed because foo=="bar", but even if execution continues to the next block, surely "b" shouldn't be displayed because foo!=123?

Does anyone know what the logic behind this is?

hi everybody,

i'm using JSE client-side site search engine to search in my page..

and this is the code:

Code:

var cookies = document.cookie;
var p = cookies.indexOf("d=");

if (p != -1) {
	var st = p + 2;
	var en = cookies.indexOf(";", st);
	if (en == -1) {
		en = cookies.length;
	}
	var d = cookies.substring(st, en);
	d = unescape(d);
}
var od = d;
var m = 0;
if (d.charAt(0) == '"' && d.charAt(d.length - 1) == '"') {
	m = 1;
}

var r = new Array();
var co = 0;

if (m == 0) {
	var woin = new Array();
	var w = d.split(" ");
	for (var a = 0; a < w.length; a++) {
		woin[a] = 0;
		if (w[a].charAt(0) == '-') {
			woin[a] = 1;
		}
	}
	for (var a = 0; a < w.length; a++) {
		w[a] = w[a].replace(/^\-|^\+/gi, "");
	}
	a = 0;
	for (var c = 0; c < s.length; c++) {
		pa = 0;
		nh = 0;
		for (var i = 0; i < woin.length; i++) {
			if (woin[i] == 0) {
				nh++;
				var pat = new RegExp(w[i], "i");
				var rn = s[c].search(pat);
				if (rn >= 0) {
					pa++;
				} else {
					pa = 0;
				}
			}
			if (woin[i] == 1) {
				var pat = new RegExp(w[i], "i");
				var rn = s[c].search(pat);
				if (rn >= 0) {
					pa = 0;
				}
			}
		}
		if (pa == nh) {
			r[a] = s[c];
			a++;
		}
	}
	co = a;
}

if (m == 1) {
	d = d.replace(/"/gi, "");
	var a = 0;
	var pat = new RegExp(d, "i");
	for (var c = 0; c < s.length; c++) {
		var rn = s[c].search(pat);
		if (rn >= 0) {
			r[a] = s[c];
			a++;
		}
	}
	co = a;

}


function return_query() {
	document.jse_Form.d.value = od;
}

function num_jse() {
	document.write(co);
}

function out_jse() {
	if (co == 0) {
		document.write('Your search did not match any documents.<p>Make sure all keywords are spelt correctly.<br>Try different or more general keywords.');
		return;
	}
	for (var a = 0; a < r.length; a++) {
		var os = r[a].split("^");
		if (bold == 1 && m == 1) {
			var br = "<b>" + d + "</b>";
			os[2] = os[2].replace(pat, br);
		}
		if (include_num == 1) {
			document.write(a + 1, '. <a href="', os[1], '">', os[0], '</a><br>', os[2], '<p>');
		} else {
			document.write('<a href="', os[1], '">', os[0], '</a><br>', os[2], '<p>');
		}
	}

}

i got it from http://www.javascriptkit.com/script/...se/index.shtml



but, in turkish alphabet the uppercase of "i" is "İ" with a dot..
and the lowercase of "I" is "ı" without a dot..

when i use the code above, it doesn't find "TEFSİR" if the user type it in lowercase as "tefsir"..
also doesn't find "Bayraklı" if the user type it all in uppercase as "BAYRAKLI"

is there a way to make this work?

hi this is my code:

<HTML>
<HEAD>
<script language="JavaScript">
function show(){
if (document.getElementById("menu2").style.visibility = "hidden")
{
document.getElementById("menu2").style.visibility = "visible";
}
}

function hide(){
document.getElementById("menu2").style.visibility = "hidden";
}
</script>
<style type="text/css">
#menu {position:absolute; left:0;top:0; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:visible}
#menu2 {position:absolute; left:0;top:27; z-Index:0;font-family:arial; font-size:14px; color:blue; visibility:hidden}
</style>
</HEAD>
<BODY>
<div ID="menu" onmouseover="show()">
<table border="1" bgcolor="#FFCC00"><tr><td>File</td></tr></table>
</div>
<div ID="menu2" onmouseout="hide()">
<table border="1" bgcolor="#FFCC00"><tr><td>New</td></tr></table>
</div>
</BODY>
</HTML>

Now i want the second layer to appear when i hover over the first, which it does. however i want it so that when i move my cursor away from the second layer it dissapears but the problem is it doesn't seem to work.

any help apreciated.

thanks

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

I'm not sure why this code executes the first if condition. What should I be doing instead?

<!DOCTYPE html>
<head>

<style>
#test { visibility:hidden; }
</style>

<script type="text/javascript">

function read(ID)
{
if(document.getElementById(ID).style.visibility == '') alert("why does this pop up?");
else if(document.getElementById(ID).style.visibility == 'hidden') alert("this is what I would expect");
else alert("never reached");
}
</script>


</head>
<body>
<form><input type="button" value="test" onclick="read('test');"">
<p id='test'> testing visibility</p>
</body>
</html>

I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick.

It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected.

Here is by code;

Javascript;
Code:

function toggle_visibility(o,id) {
 var obj = document.getElementById(id);
 obj.style.display=(obj.style.display == 'block')?'none':'block';
 if (obj.style.display!='none') {
 obj.style.left=zxcPos(o)[0]+20+'px';
 obj.style.top=zxcPos(o)[1]+20+'px';}
}

function zxcPos(obj){
 var rtn=[0,0];
 while(obj){
  rtn[0]+=obj.offsetLeft;
  rtn[1]+=obj.offsetTop;
  obj=obj.offsetParent;
 }
 return rtn;
}

Here is a sample of my a to z table;
Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>

<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
        
</tr></table>

And here is an example of the Brand name div ;
Code:

<div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid;  background-color: white;  padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>

You can view the site on my test page;
http://www.dp-development.co.uk/ProteinStop/site/

(Brand menu on the left nav)

Thank you for any help you can give

How can i change div visibility if for example index.php?site=news&show=angels http://mmwebstudio.eu/prace/2/ i have tryed to use:
Quote:
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v=='hide')?'hidden':v; }
obj.visibility=v; }
but i cannot use position absolute for my news( height of main div wont be spread) pls help

Hi there! I would REALLY appreciate any help!

I've got a script that toggles the visibility of a div on "dashboard.html":

Code:

$(document).ready(function(){

        $("#add_networks_wrapper, .remove_box").hide();
	$(".toggle_add_networks").show();
	
	$('.toggle_add_networks').click(function(){
	$("#add_networks_wrapper, .remove_box").slideToggle();
	});

});

On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it.

What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible.

Any help would be very appreciated!

I have a question: how can you use a drop down box to show another drop down box? Here is my code below.
Code:

<html>
	<head>
<script type="text/javascript">
"use strict";
	function showlist()
	{
		var list=document.getElementById("id1");
		var newlist=list.options[list.selectedIndex].value;
		if (newlist==="Opt1")
		{
			document.getElementById("one").style.visibility="visible";
			document.getElementById("two").style.visibility="hidden";
		}
		if (newlist==="Opt2")
		{
			document.getElementById("two").style.visibility="visible";
			document.getElementById("one").style.visibility="hidden";
		}
	}
</script>
<style type="text/css">
	select.a{visibility:hidden;}
</style>
	</head>
	<body>
<select id="chooseboxtoshow">
	<option value="Opt1">Option 1</option>
	<option value="Opt2">Option 2</option>
</select><br />
<select display="none" id="one" class="a">
	<option value="1a">Option 1a</option>
	<option value="1b">Option 2a</option>
</select><br />
<select display="none" id="two" class="a">
	<option value="2a">Option 1b</option>
	<option value="2b">Option 2b</option>
</select><br />
<input type="button" value="Show new list" onclick="showlist()">
	</body>
</html>

Does anyone have ideas on how I can do it? Thanks!

hi all,

i am using this javascript code which i found on a random website to create a tooltip style popup. in my head is:

Code:

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
 }
 
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>

in my body is:
Code:

<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet"> 
(latest tweet generating code)
</div>

this creates a little bird, which displays latest tweet when rolled-over.

you can see a working example of this he
http://nang-nang.net/tumblr/blog/try.html

my question a
(1) can i add something to the javascript to create a delay when onMouseOut so that the tweet doesn't disappear immediately?

also
(2) could i also add something to the javascript to create a visual effect when onMouseOver or onMouseOut occurs? like a fade in effect? or slide up effect? i've been playing around with scriptaculous effects but i'm not sure how to combine that script with my script above.

an answer to (1) at least would be very much appreciated!

I am creating a website as part of a university project. as part of this i am trying to make a menu in the top right. after looking around i have found javascript top be the best way to do this.
how would i go about making it so that when i click on one div (called map) a separate div (called mapMenu) visibility is toggled.

thanks

I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

it's so "Are you married?" "Yes" "No" (no is default checked)
when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
any help much appreciated.

Thanks!

hi all,

i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks!

code for the combo box: PHP Code:
select name="country" size="1" id="country" 
style="position:absolute; left:451px; top:260px; width:176px; 
color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; 
z-index:13" onChange="PhoneMask();">
<option value="1">United States</option>
<option value="2">Australia</option>
<option value="3">China</option>
<option value="4">Mexico</option>
<option value="5">United Kingdom</option>
</select> 


code for the different labels i want to display: PHP Code:
/*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/

<div id="phoneLabelUS" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
*Telephone Number </b></font><font style="font-size:12px" 
face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span>
</b></font></div>

<div id="phoneLabelAU" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" 
align="left"><font style="font-size:12px" color="#FF0000" 
face="Arial"><b>*Telephone Number </b></font><font 
style="font-size:12px" face="Arial"><b><span class="style9">
(xx-xxxx-xxxx)</span></b></font></div>

<div id="phoneLabelOTHER" style="position:absolute; left:10px; 
top:225px; width:207px; height:15px; visibility: hidden;" align="left">
<font style="font-size:12px" color="#FF0000" face="Arial"><b>
Telephone Number</b></font></div>

/*------------------------------------------------------------------------------------*/ 


here is my PhoneMask() function: PHP Code:
function PhoneMask() {

    if (document.getElementById("country").value == "1") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 51;
        document.getElementById("phoneLabelUS").style.visibility = 'visible'; }
    elseif (document.getElementById("country").value == "2") {
        document.getElementById("phoneLabelOTHER").style.zIndex = 50;
        document.getElementById("phoneLabelOTHER").style.visibility = 'hidden';
        document.getElementById("phoneLabelAU").style.zIndex = 51;
        document.getElementById("phoneLabelAU").style.visibility = 'visible';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
    else { 
        document.getElementById("phoneLabelOTHER").style.zIndex = 51;
        document.getElementById("phoneLabelOTHER").style.visibility = 'visible';
        document.getElementById("phoneLabelAU").style.zIndex = 50;
        document.getElementById("phoneLabelAU").style.visibility = 'hidden';
        document.getElementById("phoneLabelUS").style.zIndex = 50;
        document.getElementById("phoneLabelUS").style.visibility = 'hidden'; }
        
} 

Hey everyone,

I am normally very good at debugging these kinds of things but I've had a long day and am obviously overlooking something very, very simple.

If anyone can spot it that would be fantastic.

JavaScript
Code:

<script type="text/javascript">
function toggle (id) {
	if (document.getElementById('sub_' + id).style.display == 'none') {
		document.getElementById('sub_' + id).style.display = '';
		document.getElementById('icon_' + id).src = 'images/collapse.gif';
	} else {
		document.getElementById('sub_' + id).style.display = 'none';
		document.getElementById('icon_' + id).src = 'images/expand.gif';
	}
}
</script>

HTML
Code:

<div id="sub_0"><div style="padding-left: 0px;"><img src="images/point.gif"> Biology</div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=4">Chemistry</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=5">Earth/Space</a></div>

<div style="padding-left: 0px;"><img src="images/expand.gif" id="icon_6" onclick="javascript:toggle('6');" title="Click to Expand/Collapse"> <a href="products.php?cid=6">Physics</a></div>
<div id="sub_6" style="display: none;"><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=10">Kinimatics</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_12" onclick="javascript:toggle('12');" title="Click to Expand/Collapse"> <a href="products.php?cid=12">Dynamics</a></div>
<div id="sub_12" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=11">Newton's Laws</a></div>
<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=13">Special Forces</a></div>
<div style="padding-left: 20px;"><img src="images/expand.gif" id="icon_14" onclick="javascript:toggle('14');" title="Click to Expand/Collapse"> <a href="products.php?cid=14">Momentum</a></div>

<div id="sub_14" style="display: none;"><div style="padding-left: 30px;"><img src="images/point.gif"> <a href="products.php?cid=15">Impulse</a></div>
</div></div><div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_16" onclick="javascript:toggle('16');" title="Click to Expand/Collapse"> <a href="products.php?cid=16">Energy</a></div>
<div id="sub_16" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=17">Collisions</a></div>
</div><div style="padding-left: 10px;"><img src="images/point.gif"> <a href="products.php?cid=21">Waves</a></div>
<div style="padding-left: 10px;"><img src="images/expand.gif" id="icon_18" onclick="javascript:toggle('18');" title="Click to Expand/Collapse"> <a href="products.php?cid=18">Optics</a></div>
<div id="sub_18" style="display: none;"><div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=19">Mirrors</a></div>

<div style="padding-left: 20px;"><img src="images/point.gif"> <a href="products.php?cid=20">Lenses</a></div>
</div></div><div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=2">Mathematics</a></div>
<div style="padding-left: 0px;"><img src="images/point.gif"> <a href="products.php?cid=7">Fine Arts</a></div>
</div>    </div>

Expected Result: The icon changes to expand or collapse based on the visibility of the following <div>.

Actual Result: Shows content and changes icon to collapse but when clicking on the collapse icon the <div> does not disappear and the icon just disappears in IE. In firefox clicking on the expand icon simply causes the icon to disappear.

You can view what is happening he

http://www.onacd.ca/products.php

It is the navigation on the left.

I'm going to continue to try and figure it out - but any suggestions would be great.

I'm dying here. Perhaps I need a nap.

Luke