Ocultar / Mostrar iframes con un botón

Tengo una página web con 2 iframes, 1 debajo de la otra. Me gustaría que ambos iframes se oculten cuando un usuario hace clic por primera vez en la página web. Habrá 2 botones, 1 arriba de cada iframe y el usuario debe hacer clic en el botón para mostrar el iframe. También lo quiero, así que si se pulsa iframebutton1, iframe2 se ocultará (si se muestra) y viceversa.

Aquí está mi código:

jsfiddle.net/darego/Z62P7/

Aquí está el código que recomendaría usar:

function hideToggle(button, elem) { $(button).toggle( function () { $(elem).hide(); },function () { $(elem).show(); }); } hideToggle(".button1", ".iframe1"); hideToggle(".button2", ".iframe2"); 

Aquí está el violín de trabajo actualizado: Haga clic aquí

Esto solo usa una simple función ocultar / mostrar para que puedas reutilizarla una y otra vez.

Para mostrar u ocultar iframes:

 document.getElementById("yourIFrameid").style.display = "none"; //hides the frame document.getElementById("yourIFrameid").style.display = "block"; //shows the frame