Hide an iFrame until link is clicked

I recently made this page
for my company.
Before I begin, let me state three things to make all of our life's easier and to satisfy your curiosity.
1. I am not a webdesigner, thus not that great at Javascript, just a simple SystemsAdmin.
2. You won't see the pages the three button links go to, because the links require you be inside our firewall :)
3. I know the page doesn't looks great under IE, but thats because we don't support it nor want anyone using it (FireFox ftw!)

Ok, so, lets roll!
As you can see by opening the page on the link provided, there are three main buttons that link to a web based help request system.
Those buttons have a target of "_iFrame" and just below them, there is an iFrame with the name "_iFrame".
The links all work, when you click them the iframe shows the content and cleats when you click clear frame, great, however the iFrame takes alot of space up.

Is there a javascript code I can use that will effectively hide the iframe until one of those buttons is clicked and again when Clear Frame is clicked?
Even if it is just changing the value of the height to 0 and back.
Who is Participating?
johnsy32Connect With a Mentor Commented:
How about this...

Define the source of each of the pages in the JavaScript

      function updateIframe(target) {

      var source1 = "http://www.google.com";
      var source2 = "http://www.msn.com";
      var source3 = "http://www.yahoo.com";

                document.getElementById('iframeHolder').style.display = "";

      if (target == 1) {
      document.getElementById('theIframe').src = source1;}
      if (target == 2) {
      document.getElementById('theIframe').src = source2;}
      if (target == 3) {
      document.getElementById('theIframe').src = source3;}


      function hideIframe() {
             document.getElementById('iframeHolder').style.display = "none";

And the HTML something like

<a href="javascript:updateIframe(1);">Help</a><br />
<a href="javascript:updateIframe(2);">Web</a><br />
<a href="javascript:updateIframe(3);">Admin</a><br />
<a href="javascript:hideIframe();">Close Iframe</a><br />

<div id="iframeHolder" style="display: none;"><iframe src="http://www.google.com" id="theIframe" style="width:200;height:200;"></iframe></div>

Change settings for your needs
score_underConnect With a Mentor Commented:
This HTML will hide it, even though it is a bit crude. I had to change it to make it compatible with my browser :S.
Here it is:
function unhideframe()

code before it

<iframe src="http://www.google.co.uk" name="_iFrame" id="iFr" style="width:0;height:0;"></iframe>
<a href="javascript:void(0); //or anything else." onclick="unhideframe();">Link goes here</a><br>

code after it
...and adapt a new function to make the height and width go to 0 again for the next link that makes it hide.
BTW google.co.uk was an example site.
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

KellyCraigAuthor Commented:
So I did what you said, as seen if you go to the link again.
However it works great in FireFox, all that is required actually, but I feel bad that it doesn't even attempt to work in IE.
Is there a way to get it to just work in IE even if it isn't pretty?
If not, can javascript detect your browser and then re-direct you to an IE friendly page should you not be using FireFox?
How about putting the iframe into the div tag and using the following javascript to show and hide each layer

<script type="text/javascript">

      function toggleIframe(target) {
      targetLayer = document.getElementById(target).style;
      targetLayer.display = (targetLayer.display == "none") ? "" : "none";


<a href="javascript:toggleIframe('iframe1');">Help Iframe</a>
<a href="javascript:toggleIframe('iframe1');">Close Help Iframe</a>
<a href="javascript:toggleIframe('iframe2');">Web Iframe</a>
<a href="javascript:toggleIframe('iframe2');">Close Web Iframe</a>
<a href="javascript:toggleIframe('iframe3');">Admin Iframe</a>
<a href="javascript:toggleIframe('iframe3');">Close Admin Iframe</a>

<div id="iframe1" style="display: none;">IFRAME CODE HERE</div>

<div id="iframe2" style="display: none;">IFRAME CODE HERE</div>

<div id="iframe2" style="display: none;">IFRAME CODE HERE</div>
KellyCraigAuthor Commented:
No, that wont work as it could lead to multiple frames opened at the same time.
It also doesn't seem to work in IE7
KellyCraigAuthor Commented:

Yea, your idea doesn't work so well :/
KellyCraigAuthor Commented:
actually, hang on a sec
KellyCraigAuthor Commented:
Thank you so much!

having href="script" didnt work, sO i took out href and made it OnClick
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.