Jump to content

Hide/show various sections on page


kurt.santo

Recommended Posts

Working on page, where I want form content of two forms to be hidden and shown when the user clicks onto relevant heading. I managed to assemble various scripts and made it work for one form, but do not know how to change code, so it loops through all <h3> and does the same to all of them. The code that needs to change is (or so I think at least;-)):

    sc.head=document.getElementsByTagName('h3')[0];

(page plus complete code can be found under http://www.jalp.co.uk/testing/js/hideShowForm.htm).Kurt

Link to comment
Share on other sites

document.getElementsByTagName returns an array of elements of a specific type.The line the you provided simply gets the first element in that array:

document.getElementsByTagName('h3')[0];

If you want to loop through the array, you can use a for loop:

var heads = document.getElementsByTagName("h3");for(var i = 0; i < heads.length; i++){	var head = heads[i];	// do something with each h3 here.}

Link to comment
Share on other sites

It is working for me... clicking on "Form 1" reveals / hides an additional input.

Link to comment
Share on other sites

It is working for me... clicking on "Form 1" reveals / hides an additional input.
Synook,It is working for first form, but not for second. I am after a script that would do this with any heading appearing on the page...jesh,Thank you for your input. I put it as adviced to:
init:function(){    sc.head=document.getElementsByTagName("h3");    if(!sc.head){return;} 	for(var i = 0; i < sc.head.length; i++) {    sc.ad=DOMhelp.closestSibling(sc.head,1);    sc.ad.style.display='none';    var t=DOMhelp.getText(sc.head);    var collapseLink=DOMhelp.createLink('#',t);    sc.head.replaceChild(collapseLink,sc.head.firstChild);    DOMhelp.addEvent(collapseLink,'click',sc.peekaboo,false)    collapseLink.onclick=function(){return;}} // Safari fix  }

, but now it complains that "tempObj has no properties". I assume the problem lies in my DOMhelp.closestSibling function, which is:

closestSibling:function(node,direction){		var tempObj;		if(direction==-1 && node.previousSibling!=null){			tempObj=node.previousSibling;			while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){				 tempObj=tempObj.previousSibling;			}		}else if(direction==1 && node.nextSibling!=null){			tempObj=node.nextSibling;			while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){				 tempObj=tempObj.nextSibling;			}		}		return tempObj.nodeType==1?tempObj:false;

, but cannot understand what is wrong with it...Does anyone have an idea? Complete code on webpage mentioned above...Kurt

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...