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/darego/Z62P7/

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/

• javascript
• html
• css

• I have no idea about javascript as of yet. Only HTML and CSS so I wouldn't even know where to start – Craig Commented Jan 1, 2013 at 20:24
• googling you'll find out many tutorials about show/hide in javascript, please it is for you ;) – Filippo oretti Commented Jan 1, 2013 at 20:25
• Essentially, it's just a click toggle with show hide capabilities. Start there. – Sethen Commented Jan 1, 2013 at 20:26
• use jsbin/jsfiddle rather then pastebin, or embed the code in your question. there is no need to link to pastebin. – user1721135 Commented Jan 1, 2013 at 22:15

2 Answers 2

To show or hide iframes:

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

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.