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 ifra

Answer 1

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.

Answer 2

To show or hide iframes:

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