Hey everybody,

I'm still fairly new to javascript, and I can't seem to get this script I'm working on running correctly. What I want to do is show or hide a div based on the previous sibling's css class. Basically this is to show and hide fields for supplying more information in a form. Here's what I have so far. Any help at all would be greatly appreciated.

markup:
HTML Code:
<ul id="ulQuestion">
	<li>
		<label for="cboQuestion" id="lblQuestion">This is the question</label>
		<select id="cboQuestion" class="other">
			<option selected="selected">Choose</option>
			<option value="1">Yes</option>
			<option value="2">No</option>
			<option value="99" class="otherText">Other</option>
		</select>
		<div id="pnlOther" class="nodisplay">
			<ul id="ulOther">
				<li>
					this is the other box
				</li>
			</ul>
		</div>
	</li>
</ul>
Code:
function showOtherCbo(control, panel) {
	var hideClass = 'nodisplay';
	var showClass = 'display';
	for(var i = 0; i < control.childNodes.length; i++) {
		var opts = control.childNodes[i];
		if(opts.className == 'otherText') {
			while(panel.nodeType != 1) {
				panel = panel.nextSibling;
			}
			panel.className = showClass;
		}
	}
}
I'm using unobtrusive javascript to attach the showOther function to the select's onchange attribute, passing "this" and "this.nextSibling".

Thanks in advance.