fold/unfold ul list

[newto]

hello,

can anyone help med check what I am missing in this code:

//here I want to make the lists unvisible when you enter the page. 		
function borja(){
		var vanster=document.getElementsByTagName("h2");
			for (i=0; i<vanster.length; i++)
				{ 
					vanster[i].nextSibling.nextSibling.className="osynlig"; 
				}	
}

function visa(){ 
		var sibling=this.nextSibling.nextSibling; 
		sibling.className="synlig"; }
function dolj(){ 
		var sibling=this.nextSibling.nextSibling; 
		sibling.className="osynlig"; }
function kolla(){
					var list=document.getElementsByTagName("h2");
			 			for (i=0; i<list.length; i++){ 
//this works, the list unfolds as I want it to			 			if(list[i].nextSibling.nextSibling.className=="osynlig")
			 				{	
			 					list[i].onclick=visa;
			 				}
//here is doesnt work, the list should fold when I click the h2 again
			 			else if(list[i].nextSibling.nextSibling.className=="synlig"){
			 					list[i].onclick=dolj;
			 				}	
			 			}
			 		
				}			 
							

function init(){
			borja();
kolla();			 													
		
		} 
window.onload=init;

I am totally stuck and would appreciate the help:confused:

[Airshow]

Newto,

If you rephrase your code as follows (without actually changing anything), then you can see that only visa gets attached. dolj is never attached and never called.

function borja(){
	var vanster = document.getElementsByTagName("h2");
	for (i=0; i<vanster.length; i++){
		vanster[i].nextSibling.nextSibling.className = "osynlig";
		vanster[i].onclick = (vanster[i].nextSibling.nextSibling.className=="osynlig") ? visa : dolj;
	}
}
function visa(){
	var sibling = this.nextSibling.nextSibling;
	sibling.className = "synlig";
}
function dolj(){
	var sibling = this.nextSibling.nextSibling;
	sibling.className = "osynlig";
}
window.onload = function(){
	borja();
};

You need to cause the attached function ( visa or dolj ) to alternate such that when visa is called, dolj is called next time and vice versa.

Try this:

function borja(){
	var vanster = document.getElementsByTagName("h2");
	for (i=0; i<vanster.length; i++){
		vanster[i].nextSibling.nextSibling.className = "osynlig";
		vanster[i].onclick = visa;
	}
}
function visa(){
	var sibling = this.nextSibling.nextSibling;
	sibling.className = "synlig";
	this.onclick = dolj;
}
function dolj(){
	var sibling = this.nextSibling.nextSibling;
	sibling.className = "osynlig";
	this.onclick = visa;
}
window.onload = function(){
	borja();
};

Airshow

[Airshow]

Also, beware of nextSibling .

IE and Moz browsers behave differently with regard to white space between HTML tags. Moz sees whitespace as a qualifying (text) node, IE doesn't.

Be sure to test your code in IE and (eg.) Firefox.

Airshow

[newto]

thank you so much, it worked in FF and in safari. will try IE later and check how it looks.
thanks again for your help:)