Esto es lo que tengo:

Tengo un gridcontainer con tres celdas donde una celda contiene tres botones. Cada botón muestra una imagen debajo del contenedor.

Se supone que mi código javascript hace que la imagen desaparezca si se presiona un botón dos veces pero no lo hace atm. La única forma de hacer que desaparezca es presionar otra imagen y reemplazarla con una nueva imagen o recargar la página.

Esto es lo que quiero hacer:

En lugar de reemplazar y ocultar imágenes, quiero reemplazar y ocultar gridcontainers. Entonces, en lugar de botones que muestran imágenes, mostrarán un par de celdas con una combinación de texto e imágenes. El contenido y el diseño cambiarán cuando se cambie un nuevo botón, y desaparecerán por completo cuando se presione el mismo botón dos veces. ¿Es esto factible?

Este es mi javascript actual:

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

se activa con este 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>"

y se corresponde aún más con este html (situado fuera y debajo del contenedor, también debajo de la etiqueta principal):

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

¿Qué tiene de malo mi código actual y cómo puedo mejorarlo para adaptarlo a mi propósito?