hot do I use multiple ids with getElementById?

ashcroft77

03-18-2009, 12:59 PM

I want to be able to use 'wrapper' more than once on the same page.
Any suggestions? Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
// Copyright 2007 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
// TJK_togglePanels() Version 1.0 report bugs or errors to thierry@tjkdesign.com
function TJK_toggleTheDIVs(objEvent,objInput){
var iKeyCode;// source for the following snippet: http://juicystudio.com/article/ecmascriptmenu.php
if (objEvent && objEvent.type == 'keypress'){if (objEvent.keyCode)iKeyCode = objEvent.keyCode;else if (objEvent.which) iKeyCode = objEvent.which;if(iKeyCode != 13 && iKeyCode != 32){return true;}}
var zH2=document.getElementById("Wrapper").getElementsByTagName('h2');
var zDIV=document.getElementById("Wrapper").getElementsByTagName('div');
for (i=0; i <zDIV.length ; i++){
zH2[i].className="H2plus"; // quick and dirty: we reset them all
zDIV[i].className="hideDIV";
}
objInput.nextSibling.className='showDIV';
objInput.className='H2minus';
}
function TJK_togglePanels(){
JS = "";
if (!document.getElementById || JS =="off") return;
var zH2=document.getElementById("Wrapper").getElementsByTagName('h2');
var zDIV=document.getElementById("Wrapper").getElementsByTagName('div');
for(var i=0;i<zH2.length;i++){
zH2[i].onclick=function(event){return TJK_toggleTheDIVs(event,this)};
zH2[i].onkeypress=function(event){return TJK_toggleTheDIVs(event,this)};
zH2[i].tabIndex="0";
zH2[i].title='Show/Hide the answer';
zDIV[i].className='hideDIV';
zH2[i].className='H2plus';
}
zH2[0].className='H2minus';
}
window.onload=function(){
TJK_togglePanels();
}
</script>
<style type="text/css">
body {width:55em;font-size:100.01%;color:#333;font-family:Arial, Helvetica, sans-serif;margin:12px auto;background:#fff}
h2 {font-size:1em}
#Wrapper a {padding:0 5px;background:#ffc;color:#555;text-decoration:none}

/* Wrapper */
/* BETTER for tabbed panels based on headings and divs */
#Wrapper {position:relative;height:180px;width:180px;;overflow:visible}
#Wrapper h2 {height:1.85em;line-height:1.85em;margin:0;font-size:.7em;zoom:1;margin-right:2px;cursor:pointer;font-weight:bold;text-decoration:none;float:left;padding:0 7px;background:#9DD9F7}
#Wrapper h2:hover {background:#C7EAFB}
/* selected */
#Wrapper h2.H2minus {background:#C7EAFB;position:relative;z-index:10}
#Wrapper .showDIV,#Wrapper div#first {top:1.35em;font-size:1em;margin:0;width:180px;height:180px;background:#C7EAFB}
#Wrapper div,#Wrapper .hideDIV {position:absolute;top:-9999px;left:0}
/*\*//*/
#Wrapper {width:60em}
#Wrapper div.showDIV,#Wrapper div#first {display:block}
#Wrapper div,#Wrapper div.hideDIV {top:0;display:none}
#Wrapper .showDIV,#Wrapper div#first {top:1.3em}
/**/
</style>

</head>

<body>

<div id="Wrapper">
<h2>1</h2><div id="first"><img src="images/blue.gif" /></div>
<h2>2</h2><div><img src="images/red.gif" /></div>
<h2>3</h2><div><img src="images/yellow.gif" /></div>
<h2>4</h2><div><img src="images/green.gif" /></div>

</div>

</body>
</html>

abduraooft

03-18-2009, 01:05 PM

Please edit your post and add ][/COLOR] tags around your code. Could you elaborate your question a little more?

Philip M

03-18-2009, 01:26 PM

Like abduraooft, I am not clear what the question is.

You may not have two divs with the same id, but Javascript is case sensitive and Wrapper is not the same as wrapper.

ashcroft77

03-18-2009, 01:41 PM

I meant to refer to 'wrapper' as 'Wrapper', so sorry for the confusion.

To re-iterate a bit clearer, I want to use mulitiple ids on the page using the functions 'TJK_toggleTheDIVs' and 'TJK_togglePanels'.

How do I edit the JavaScript to be able to achieve this?

rangana

03-18-2009, 03:49 PM

IDs are meant for one element on a page only, you better use class Name instead.

Use this script, which would get all elements with a class name of Wrapper and apply that tab effect:

<script type="text/javascript">
// Copyright 2007 | Thierry Koblentz - www.TJKDesign.com All Rights reserved
// TJK_togglePanels() Version 1.0 report bugs or errors to thierry@tjkdesign.com
// Modified by rangana @ codingforums.com
// * Reference element via class name instead of ID
function TJK_toggleTheDIVs(objEvent,objInput) {
var iKeyCode;// source for the following snippet: http://juicystudio.com/article/ecmascriptmenu.php
if (objEvent && objEvent.type == 'keypress') {
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
if(iKeyCode != 13 && iKeyCode != 32)
return true;
}
var el = document.getElementsByClassName('Wrapper');
for (var c = 0; c < el.length; c++) {
var zH2 = el[c].getElementsByTagName('h2');
var zDIV=el[c].getElementsByTagName('div');
for (i=0; i <zDIV.length ; i++) {
zH2[i].className="H2plus"; // quick and dirty: we reset them all
zDIV[i].className="hideDIV";
}
objInput.nextSibling.className='showDIV';
objInput.className='H2minus';
}
}
function TJK_togglePanels() {
JS = "";
if (!document.getElementById || JS =="off")
return;
var el = document.getElementsByClassName('Wrapper');
for (var c = 0; c < el.length; c++) {
var zH2 = el[c].getElementsByTagName('h2');
var zDIV=el[c].getElementsByTagName('div');
for(var i=0;i<zH2.length;i++) {
zH2[i].onclick=function(event){return TJK_toggleTheDIVs(event,this)};
zH2[i].onkeypress=function(event){return TJK_toggleTheDIVs(event,this)};
zH2[i].tabIndex="0";
zH2[i].title='Show/Hide the answer';
zDIV[i].className='hideDIV';
zH2[i].className='H2plus';
}
zH2[0].className='H2minus';
}
}

// Script taken from this thread: http://codingforums.com/showthread.php?t=154727
if(!document.getElementsByClassName) {
document.getElementsByClassName = function (cn) { // the speed king by ~11%
var rx = new RegExp("(?:^|\\s)" + cn+ "(?:$|\\s)");
var allT =document.getElementsByTagName("*"), allCN = [],i = 0, ac="", a;
for (mx=allT.length;i<mx;i=i+2){
a = allT[i]; ac=a.className;
if ( ac && ac.indexOf(cn) !==-1) {
if(ac===cn){ allCN[allCN.length] = a; continue; }
rx.test(ac) ? (allCN[allCN.length] = a) : 0;
}

a = allT[i+1]; if(!a){ break ;}
ac=a.className;
if ( ac && ac.indexOf(cn) !==-1) {
if(ac===cn){ allCN[allCN.length] = a; continue; }
rx.test(ac) ? (allCN[allCN.length] = a) : 0;
}

}

return allCN;
}
}
window.onload=TJK_togglePanels;
</script>

Don't forget to change your CSS. Since you're using class name already, change # to .

Hope that helps.