How do I use an button to hide or show an iframe?

Question

Honestly, I just don't know how to do it. I want to access two sites from one html document. I need to have only one showing at a time, here is what I have so far.

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the              iframe source.</p>

<iframe src="http://cp.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the iframe     source.</p>
</iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel"><br>
<input type="button" name="CreeperHost" value="CreeperHost"><br>


</body>
</html>

I want the iframe with the src="www.creeperhost.net" to show when I select the input button "CreeperHost", and vise versa for when I click on "CreeperPanel", to show only the src="cp.creeperhost.net". If you could, I would like to know how to instead of completly hiding the other window, make it smaller in the bottom right.

score 2 · Accepted Answer · edited May 23 '17 at 12:13

This is the same principle as showing a div.

<iframe src="http://www.creeperhost.net" id="panel1"></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2"></iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">

<script type="text/javascript">
  function showPanel1() {
    document.getElementById('panel2').style.display = "none";
    document.getElementById('panel1').style.display = "block";
  }

  function showPanel2() {
    document.getElementById('panel1').style.display = "none";
    document.getElementById('panel2').style.display = "block";
  }
</script>

Both your iframes have the same id. I tried this in jsfiddle but I'm not having any luck. — LuFaMa, Dec 03 '13 at 17:37

score 0 · Answer 2 · answered Dec 03 '13 at 18:00

<style>
.bottom{
position : fixed;
bottom : 0px;
right   :0px;
width : 50px;
height : 50px;
overflow : hidden;
}

</style>

<iframe src="http://www.creeperhost.net" id="panel1" ></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2" class="bottom"></iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">

<script type="text/javascript">
 var panel1 = document.getElementById('panel1'),
     panel2 = document.getElementById('panel2');

  function showPanel1() {
       panel1.className = "";
       panel2.className = "bottom";
  }

  function showPanel2() {
       panel2.className = "";
       panel1.className = "bottom";
  }
</script>

score 0 · Answer 3 · answered Dec 03 '13 at 18:25

0

Try this fiddle:

http://jsfiddle.net/ky7X5/5/

function showPanel(a,b)
{
    document.getElementById(a).style.display="inline-block";
    document.getElementById(b).style.display="none";
}

answered Dec 03 '13 at 18:25

Zword

6,605
3
27
52

How do I use an button to hide or show an iframe?

3 Answers3