How can I make a div visible after I've hidden it?

Question

I'd like to make my image and text disappear and appear onclick. While it will disappear, once I've hidden it I can't make it visible again. How can I fix this?

My Javascript:

function toggle_visibility(id) {
    var e = document.getElementById(id);
if(e.style.visibility == 'visible')
    e.style.visibility = 'hidden'
else
    e.style.visibility = 'visible'
}

And inside my html template:

<a onclick="toggle_visibility('foo');"/>
    <div id="foo" style="visibility:visible;" >
        <img src="../static/image1.png"   
            style="left:17%;position:fixed;">
        <div class="scrollBox" 
            style="font:12px;height:30%;width:55%;left:17%;position:fixed;overflow:auto;"/>
            <p> text and stuff goes in here </p>

Answer 1

You do need the ;'s

Also, you need something to click. Your a tag was malformed.

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; } 

 <a onclick="toggle_visibility('foo');">Click Me</a> <div id="foo" style="visibility:visible;" > <img src="../static/image1.png" style="left:17%;position:fixed;"> <div class="scrollBox" style="font:12px;height:30%;width:55%;left:17%;position:fixed;overflow:auto;"/> <p> text and stuff goes in here </p> 

Answer 2

Working JSFiddle

Your Html code is not correct

<a onclick="toggle_visibility('foo');"> test
    <div id="foo" style="visibility:visible;">
        <img src="../static/image1.png"   
        style="left:17%;position:fixed;"/>
        <div class="scrollBox" 
            style="font:12px;height:30%;width:55%;left:17%;position:fixed;overflow:auto;">
            <p> text and stuff goes in here </p>
        </div>

        </div>
</a>