hide or show an iframe. Tutorial with css and javascrit explained
Running ...

Playing with iframe




Pick a Wine (click on the link to open the iframe)

Close the iframe (click on the link to close the iframe)



The code


  • Height of iframe : when the page is loaded, 0px. To open it change the height

<a href="#" onclick="document.getElementById('opt_iframe').style.height=
'391px';return false;"
title="Pick a Wine"
onmouseover="window.status='Click to Open the iframe';
return true; "
onmouseout="window.status=''; return true;">
Pick a Wine</a>
(click on the link to open the iframe)



One Link to Open or Close the iframe - A Flip-Flop




Domaine du Mont d'Or - Vignoble d'exception (Click to Open or Close the iframe)



The code


  • A simple function change the height of the iframe. We need a variable (i_state) to store the status of the iframe
  • Create the variable outside the poke_iframe function

var i_state = 0;


functionpoke_iframe (id)
{
var obj = document.getElementById(id);
if (i_state == 1)
{
obj.style.height="0px";
i_state = 0; }
else
{
obj.style.height="380px";
i_state = 1;
}
return;
}


  • The html for the link. Note we use return=false to not follow the anchor define by href


<a href="#" onclick=
"poke_iframe('my_iframe'); return false;"
title="Click to Open or Close" onmouseover="window.status='Click to Poke the iframe';
return true; "
onmouseout="window.status=''; return true;">
Click to Open or Close</a>




More informations





One Day - One Label - One Wine