kurt.santo Posted December 3, 2007 Share Posted December 3, 2007 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 More sharing options...
jesh Posted December 3, 2007 Share Posted December 3, 2007 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 More sharing options...
Synook Posted December 4, 2007 Share Posted December 4, 2007 It is working for me... clicking on "Form 1" reveals / hides an additional input. Link to comment Share on other sites More sharing options...
kurt.santo Posted December 4, 2007 Author Share Posted December 4, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.