Hide an iframe and show the original ?

Question

Hi

I have 2 images if I click on first image it goes to the allwidget() method, which generates an iframe. I also have another image which calls homepage(), when I click on that image, the iframe must be hidden and original UI must be displayed.

My code is:

function allwidget(url){
  var outer= document.getElementById("outer");
  outer.innerHTML = "<iframe src="+url+" align='left' height='1060px' width='5760px' scrolling='no'  frameborder='0' id='lodex' style='visibility:visible;'></iframe>";
}

function homepage(){
  alert("super");
  var outer= document.getElementById("lodex").style.display="visible";
  if (outer){
    var outer= document.getElementById("lodex").style.display="visible";
    document.getElementById("lodex").style.display="hidden";
  }
}

I tried much things, but did not get the solution

Please Help

Thanks...

Answer 1

Why not simply removing the HTML from the outer element?

function homepage(){
  var outer = document.getElementById("outer");
  outer.innerHTML = "";
}

Edit:

Or if the outer element contained the original UI, you could store it before showing the iframe and restore it afterwards:

var originalHTML;

function allwidget(url){
  var outer= document.getElementById("outer");
  originalHTML = outer.innerHTML;
  outer.innerHTML = "<iframe src="+url+" align='left' height='1060px' width='5760px' scrolling='no'  frameborder='0' id='lodex' style='visibility:visible;'></iframe>";
}

function homepage(){
  var outer = document.getElementById("outer");
  outer.innerHTML = originalHTML;
}