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
        <a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion+de&amp;sll=20.984928,82.752628&amp;sspn=61.071168,79.013672&amp;ie=UTF8&amp;hq=Pearl+Academy+of+fashion,+CH+Girdhari+Lal+Marg,+Naraina+Industrial+Area,+Naraina,+Delhi&amp;t=m&amp;ll=28.648453,77.146039&amp;spn=0.011298,0.037293&amp;z=15&amp;output=embed" target="frame">Click Here To View Map</a>
    </li>
    <li class="span2">
        <h6>NOIDA :</h6>
        B-25,Sector - 59,
        Noida- 201301, UP.
        Tel. No. : 0120 - 4904000
        <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=B-25,Sector+-+59,+Noida-+201301+UP.&amp;sll=37.0625,-95.677068&amp;sspn=50.244827,79.013672&amp;ie=UTF8&amp;hq=&amp;hnear=Sector+59,+NOIDA,+Gautam+Buddha+Nagar,+Uttar+Pradesh,+India&amp;t=m&amp;ll=28.610219,77.367697&amp;spn=0.022605,0.074587&amp;z=14&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a>
    </li>
    <li class="span2">
        <h6>CHENNAI :</h6>
        82,Sterling Road,
        Nungambakkam,(Opposite Loyola College),
        Chennai - 600034
        Tel. No. : 044-42664445 /46/49/50, 43447900
        <a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;aq=0&amp;oq=Pearl+Academy+Of+Fashion,+Chennai&amp;sll=13.065034,80.239013&amp;sspn=0.008121,0.009645&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,&amp;hnear=Sterling+Rd,+Nungambakkam,+Chennai,+Tamil+Nadu&amp;t=m&amp;ll=13.065516,80.239592&amp;spn=0.006271,0.018647&amp;z=16&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a>
    </li>
    <li class="span2">
        <h6>JAIPUR :</h6>
        SP-38A,RIICO Industrial Area,
        Delhi Road,Kukas,
        Jaipur-302028.
        Tel. No. : 01426 - 414800, 227515, 227616, 227617
        <a href="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Pearl+Academy+Of+Fashion,+Jaipur+city+office,+Rajasthan&amp;aq=&amp;sll=25.845253,74.840307&amp;sspn=7.677536,9.876709&amp;ie=UTF8&amp;hq=Pearl+Academy+Of+Fashion,+Jaipur+city+office,&amp;hnear=Rajasthan&amp;t=m&amp;cid=16689440355655361409&amp;ll=27.527758,76.783447&amp;spn=2.922529,9.547119&amp;z=7&amp;iwloc=A&amp;output=embed" target="frame">Click Here To View Map</a>
    </li>
</ul>
<span style="color: #e15b1f;">For more information contact:<a href="#"> [e-mail]</a>, 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">
<a href="#" target="frame" class="click_iframe">Click Here To View Map</a>
<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