I operate a phpBB forum, on which I have installed this Syntax Highlighter MOD. Today, I started working on a feature that will use two DIVs to make the code box appear in full screen on the page. The DIV on which the user clicks to load the box in full screen will always have the same ID, but the syntax highlighter has a DIV ID which is random each time the page is loaded. I am having an issue with the DIV on which the user clicks always loading the first instance of the code box in full screen, regardless of which version of the DIV the user clicks on.If you are have a hard time understanding what I am saying, here is an ugly, but usable demo. To make the ugly orange box load in full screen, click on the blue image above it. Each blue image is in its own DIV, both of which have the ID 'first'. The first ugly orange box has the ID 'testDIV' and the second has the ID 'testDIV2'. The code is written in such way that the DIV of each ugly orange box should be determined based on the DIV of the button. While my code works for this, it only works to find the first orange box.Here is the code that I wrote that forms the demo.<!-- HTML div Guniea Pigs --><div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursor
ointer"></div><div id="testDIV">DIV 1</div><!-- Round 2 --><div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursorointer"></div><div id="testDIV2">DIV 2</div><!-- div Styling, to help us see our guinea pigs. --><style> body{ background:#000; } #testDIV{ background:#F58B00; max-height:100px; } #testDIV2{ background:#F58B00; max-height:100px; }</style><!-- JavaScript that will control the way that the page behaves on page toggling. THIS IS WHAT IS MOST IMPORTANT! --><script> function toggleFullScreen(){ var toggleDIV = document.getElementById("first"); // This stores the ID of the toggle DIV. var testDIV = document.getElementById("first").nextElementSibling; // Since the div ID will fluctuate each time during page load, this will acquire it for us using the previous div in relation to it. if (document.getElementById("viewToggleImg").src =http://stackoverflow.com/questions/15736435/="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png") { // If we are in here, then we are toggling to full screen. document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Exit_Full_Screen.png'; document.getElementById("viewToggleImg").style.marginRight ='20px'; toggleDIV.style.position = 'fixed'; toggleDIV.style.top = '0px'; toggleDIV.style.bottom = '0px'; toggleDIV.style.left = '0px'; toggleDIV.style.right = '0px'; toggleDIV.style.background = '#FFF'; toggleDIV.style.paddingTop = '10px'; testDIV.style.position = 'fixed'; testDIV.style.top = '44px'; testDIV.style.bottom = '1px'; testDIV.style.left = '1px'; testDIV.style.right = '1px'; testDIV.style.maxHeight = 'none'; } else { // If we are in here, then we are toggling back to original page view. document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png'; document.getElementById("viewToggleImg").style.marginRight = '0px'; toggleDIV.style.position = 'static'; toggleDIV.style.background = 'none'; toggleDIV.style.paddingTop = '0px'; testDIV.style.position = 'static'; testDIV.style.maxHeight = '100px'; } }</script>Could someone please offer some advice on how to resolve this issue?
ointer"></div><div id="testDIV">DIV 1</div><!-- Round 2 --><div id="first" align="right"><img src="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png" height="24" width="24" onclick="toggleFullScreen()" id="viewToggleImg" style="cursorointer"></div><div id="testDIV2">DIV 2</div><!-- div Styling, to help us see our guinea pigs. --><style> body{ background:#000; } #testDIV{ background:#F58B00; max-height:100px; } #testDIV2{ background:#F58B00; max-height:100px; }</style><!-- JavaScript that will control the way that the page behaves on page toggling. THIS IS WHAT IS MOST IMPORTANT! --><script> function toggleFullScreen(){ var toggleDIV = document.getElementById("first"); // This stores the ID of the toggle DIV. var testDIV = document.getElementById("first").nextElementSibling; // Since the div ID will fluctuate each time during page load, this will acquire it for us using the previous div in relation to it. if (document.getElementById("viewToggleImg").src =http://stackoverflow.com/questions/15736435/="http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png") { // If we are in here, then we are toggling to full screen. document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Exit_Full_Screen.png'; document.getElementById("viewToggleImg").style.marginRight ='20px'; toggleDIV.style.position = 'fixed'; toggleDIV.style.top = '0px'; toggleDIV.style.bottom = '0px'; toggleDIV.style.left = '0px'; toggleDIV.style.right = '0px'; toggleDIV.style.background = '#FFF'; toggleDIV.style.paddingTop = '10px'; testDIV.style.position = 'fixed'; testDIV.style.top = '44px'; testDIV.style.bottom = '1px'; testDIV.style.left = '1px'; testDIV.style.right = '1px'; testDIV.style.maxHeight = 'none'; } else { // If we are in here, then we are toggling back to original page view. document.getElementById("viewToggleImg").src='http://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/Full_Screen.png'; document.getElementById("viewToggleImg").style.marginRight = '0px'; toggleDIV.style.position = 'static'; toggleDIV.style.background = 'none'; toggleDIV.style.paddingTop = '0px'; testDIV.style.position = 'static'; testDIV.style.maxHeight = '100px'; } }</script>Could someone please offer some advice on how to resolve this issue?