Manipulating the correct when there are two or more that have the same ID

Question

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:pointer"></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="cursor:pointer"></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://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?

Answer 1

The easiest way to fix this would be passing a reference to clicked element (viewToggleImg) using the this keyword:

onclick="toggleFullScreen(this)"

Then get the related elements through DOM traversal methods:

function toggleFullScreen(viewToggleImg){
    var toggleDIV = viewToggleImg.parentNode;
    var testDIV = toggleDIV.nextElementSibling;

And use those variables throughout your function. Updated pen

Though, I'd suggest using jQuery for easily doing such tasks in a non-obtrusive way and shimming compatibility with older browsers (nextElementSibling does not work for IE<9, in case you need/want to support it).

Though, you don't need jQuery for something so small that is already working, so here's the patched version using feature detection for nextElementSibling else the shim outlined in this answer:

function nextElementSibling( el ) {
    do { el = el.nextSibling } while ( el && el.nodeType !== 1 );
    return el;
}
function toggleFullScreen(viewToggleImg){
    var toggleDIV = viewToggleImg.parentNode;
    var testDIV = toggleDIV.nextElementSibling || nextElementSibling(toggleDIV);
    //...

Pen & fullpage demo (tested in IE8)

Or with jQuery:

   var testDIV = $(toggleDIV).next()[0];