want to hide the iframe until link is clicked - html

Question

I have four links which open on an iframe on that same page. My problem is that the iframe takes the space on page load and I want that it will remain hide until any link is clicked coz in small screen size the same page is loading on that iframe on page load though it working well in big screen size.
Here is my code for opening the iframe :
<ul class="thumbnails">
<li class="span2">
<h6>DELHI :</h6>
A-21/13,Naraina Industrial Area,
Phase II,
New Delhi - 110028.
Tel. No. : 011 - 49807100 / 101
Click Here To View Map
</li>
<li class="span2">
<h6>NOIDA :</h6>
B-25,Sector - 59,
Noida- 201301, UP.
Tel. No. : 0120 - 4904000
Click Here To View Map
</li>
<li class="span2">
<h6>CHENNAI :</h6>
82,Sterling Road,
Nungambakkam,(Opposite Loyola College),
Chennai - 600034
Tel. No. : 044-42664445 /46/49/50, 43447900
Click Here To View Map
</li>
<li class="span2">
<h6>JAIPUR :</h6>
SP-38A,RIICO Industrial Area,
Delhi Road,Kukas,
Jaipur-302028.
Tel. No. : 01426 - 414800, 227515, 227616, 227617
Click Here To View Map
</li>
</ul>
<span style="color: #e15b1f;">For more information contact: counsellor#pearlacademy.com, Toll Free No. 1800 103 3005</span>
And here is the iframe on same page:
<div style="display:none;">
<iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe>
</div>

Answer 1

Now you can do this :focus
As like this
Css
.frame_div{
border:solid 1px red;
width:300px;
display:none;
}
.frame_div iframe{
height:200px;
width:300px;
background:green;
}
.click_iframe{
display:inline-block;
vertical-align:top;
}
.click_iframe:focus + div{
display:block;
}
HTML
<ul class="thumbnails">
<li class="span2">
Click Here To View Map
<div class="frame_div"><iframe name="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>
</li>
</ul>
Live Demo

Answer 2

You could add an onclick event to your ul:
<ul class="thumbnails" onClick="document.getElementById('frame').parentNode.style.display=''">
assuming that your iframe id is "frame":
<div style="display:none;"><iframe name="frame" id="frame" src="#" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="870" height="300"></iframe></div>