Using the hide/show function for multiple img, but always the same img shows up

Question

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

Answer 1

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>

Answer 2

Is your ID always the same?... Your functions should work like

<div .... onclick="hide(this)">

and then

function hide(o) {o.style.display="none";}

This will give hide the caller object so you can close the actual thing you're clicking on (not something looked up by an ID that's always the same). Also, maybe you'd like to look into jQuery because it helps a lot if you don't want to bind the event right to the object you're hiding (but something inside of it):

function hideMyContainer(o) { $(o).closest(".some-container-class").hide(); }

Hope this helps.

Answer 3

IDs must be unique. Use deferent classes for div.In this example I have change your Id to class

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

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

Jquery library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Use Jquery

<script>
$(document).ready(function(){

    $(".closeit").click(function(e)
    { 
     $(this).parent().parent().hide();
    } 
    });
});

</script>

Answer 4

Why you do not use jQuery function to toggle elements? http://jsfiddle.net/skxe2/1/

<div id="benefits">
    <img src="img/Bigleopard.png" id="leopard2" />
    <a class="closeit" href="javascript:;">Return home</a>
    <img src="img/Bigleopard.png" id="leopard2" />
    <a class="closeit" href="javascript:;">Return home</a>
    <img src="img/Bigleopard.png" id="leopard2" />
    <a class="closeit" href="javascript:;">Return home</a>
    <img src="img/Bigleopard.png" id="leopard2" />
    <a class="closeit" href="javascript:;">Return home</a>
</div>


<script type="text/javascript">
$(".closeit").on("click", function () {
    $(this).prev("img").toggle();
});
</script>

Maybe it could help you. You must use classes on your element.