This is what I have:

I have a gridcontainer with three cells where one cell contains three buttons. Each button displays an image below the container.

My javascript code is supposed to make the image disappear if a button is pressed twice butdoes not do so atm. The only way to make it disappear is to either press another picture hence replacing it with a new pic or reload the page.

This is what I want to do:

Instead of replacing and hiding images, I want to replace and hide gridcontainers. So instead of buttons showing pictures they will show a couple of cells with a mix of text and images. The content and layout on this will change when a new button is change, and will totally disappear when the same button is pressed twice. Is this doable.

This is my current javascript:

function changeImage(element){
if(document.getElementById('imageReplace').src==element){
     document.getElementById('imageReplace').src="";
    } else{ document.getElementById('imageReplace').src=element; }

it is activated by this html:

<div class="cell"><h2>Top reasons you should have a digital self     
defense</h2>
 
<button class="infobutt"   
onclick="changeImage('survcap1.jpeg');">Intellectual  
freedom</button> 
<button class="infobutt"  
onclick="changeImage('survcap2.jpeg');">protect vulnerable 
groups</button>
<button class="infobutt" 
onclick="changeImage('survcap3.jpeg');">Take control over your 
life</button></div>"

and correponds further with this html (Situated outside and below the container, also below main tag):

<img src="" alt="Images" id="imageReplace"/>

What is wrong with my current code and how can I improve it to suit my purpose?