I am building a sliding faq list. I don't want to use any inline event handlers and i don't want to use numbered IDs (answer1, answer2, etc).

This code almost works. The Event.observe for the DD tags is not setting properly. The error I get returned when I test it out is that the element has no properties.

My js:

var list_ele;

function init_cToggle ( _0 )

{
	
	list_ele = $ ( _0 );
	
	var dt = list_ele.getElementsByTagName('dt');
	
	var dd = list_ele.getElementsByTagName('dd');
	
	for ( var i=0; i < dt.length; i++ )
	
	{
		
		dd [ i ].style.display = 'none';
		
		Event.observe ( dt [ i ], 'click', function ( ) 
		{
			cToggle( dd[i] );
		
		} );
		
	}
	
}

function cToggle ( _0 )

{
	
	_0.toggle();

}


Event.observe ( window, 'load', function ( )									  
{

	init_cToggle( 'faq_list' );
	   
} );

My HTML (yes i link to prototype.js and my other js libs in the header):

<dl id="faq_list">

	<dt>Question 1</dt>
	
		<dd>Answer 1...</dd>
	
	<dt>Question 2</dt>
	
		<dd>Answer 2...</dd>
	
	<dt>Question 3</dt>
	
		<dd>Answer 3...</dd>
	
	<dt>Question 4</dt>
	
		<dd>Answer 4...</dd>
	
</dl>

Any takers on this one?

fixed! it was a scope issue. I found the answer here:

http://lists.evolt.org/pipermail/jav...ly/012274.html

here is my new javascript code:

/* initialize everything */
function init_cToggle ( _0 )

{
	var list_ele = $ ( _0 );
		
	var dd = list_ele.getElementsByTagName('dd');
	
	var dt = list_ele.getElementsByTagName('dt');
	
	for ( var i=0; i < dd.length; i++ )
	
	{
	
		var x = i;
		
		dd [ x ].style.display = 'none';
		
		dt [ x ].className = 'plus_img';
		
		cObserve ( dt[x], dd[x] );
		
	}
	
}

/* add event listeners */
function cObserve ( _0, _1 )
{
	
	Event.observe ( _0, 'click', function (  ) 
	{
		cToggle( _1, _0 );
	
	} );
	
}

/* do the toggles */
function cToggle ( _0, _1 )

{
	
	//$ ( _0 ).toggle();
	
	if ( $ ( _0 ).getStyle('display') == 'none' )
	
	{
		
		new Effect.BlindDown ( $ ( _0 ), {duration:0.5} );
		
		$ ( _1 ).removeClassName( 'plus_img' );
		
		$ ( _1 ).addClassName( 'minus_img' );
		
	}
	
	else
	
	{
		
		new Effect.BlindUp ( $( _0 ), {duration:0.5} );
		
		$ ( _1 ).removeClassName( 'minus_img' );
		
		$ ( _1 ).addClassName( 'plus_img' );
		
	} 

}

html is the same.