Using the hide / show function for several img, but still the same img appears

advertisements

So, I'm making this website as a task for school and I put following function in it.

function show() {
    if(document.getElementById('benefits').style.display=='none') {
        document.getElementById('benefits').style.display='block';
    }
    return false;
}
function hide() {
    if(document.getElementById('benefits').style.display=='block') {
        document.getElementById('benefits').style.display='none';
    }
    return false;
}

With this html code to go with it

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png"id="leopard2">
       <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div>
</div>

I'm using the html part several times over so I can use the same function for multiple imgs on one page. The img to open can be different every time, but once I click on it, it keeps me showing the same img. So when I click on another div with a different img, the same img from the first div will show up.

EDIT***

Now I'm using different Id's on the divs and I'm using the javascript like this (Javascript has to be used for this task)

function show() {
    if(document.getElementById('benefits').style.display=='none') {
        document.getElementById('benefits').style.display='block';
    }
    return false;
}
function hide() {
    if(document.getElementById('benefits').style.display=='block') {
        document.getElementById('benefits').style.display='none';
    }
    return false;
}   

function show() {
    if(document.getElementById('polarbears').style.display=='none') {
        document.getElementById('polarbears').style.display='block';
    }
    return false;
}
function hide() {
    if(document.getElementById('polarbears').style.display=='block') {
        document.getElementById('polarbears').style.display='none';
    }
    return false;
}

and these are the two divs:

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png" id="leopard2">
       <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div>
</div>

<div id="polarbears" style="display:none;"><img src="img/Bigpolarbear.png" id="polarbear2">
       <div id="upbutton"><a id="closeit" onclick="return hide();" >Return home</a></div>
</div>

After doing this, I now get the Bigpolarbear.png img to show up all the time. First it was the leopard img that showed up all the time.

I can't seem to find it out


Generally it is considered as a bad pratice to have multiple elements on a single page, that have the same id. If you refere then with JavaScript to them by id it simply finds the first element with given id and performs action on it. You should use different ids for difeerent div elements and then it will work. Alternatively - to show and hide methods you may pass a handle to a clicked element and by that you might get access to element you want to show or hide. The whole thing you're developing might be easily done with jQuery like that:

function show(element){
    element.parent().parent().show();
}
function hide(element){
    element.parent().parent().show();
}

<div id="benefits" style="display:none;"><img src="img/Bigleopard.png"id="leopard2">
   <div id="upbutton"><a id="closeit" onclick="hide(this);" >Return home</a></div>
</div>