Hide/Show iframes with a button

Question

I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show the iframe. Also I want it so if iframebutton1 is pressed then iframe2 will be hidden (if it's showing) and visa versa.

Here is my code:

jsfiddle.net/darego/Z62P7/

Answer 1

To show or hide iframes:

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

Answer 2

Here is the code that I would recommend using:

function hideToggle(button, elem) {
  $(button).toggle( function () {
    $(elem).hide();
  },function () {
    $(elem).show();
  });
}

hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");

Here is the updated working fiddle: Click here

This just uses a simple hide/show function so you can reuse it again and again.