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:

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

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

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:)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.