want to hide the iframe until link is clicked

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 :


    
        DELHI :
        A-21/13,Naraina Industrial Area,
        Phase II,
        New Delhi - 110028.
        Tel. No. : 011 - 49807100 / 101
        Click Here To View Map
    
    
        NOIDA :
        B-25,Sector - 59,
        Noida- 201301, UP.
        Tel. No. : 0120 - 4904000
        Click Here To View Map
    
    
        CHENNAI :
        82,Sterling Road,
        Nungambakkam,(Opposite Loyola College),
        Chennai - 600034
        Tel. No. : 044-42664445 /46/49/50, 43447900
        Click Here To View Map
    
    
        JAIPUR :
        SP-38A,RIICO Industrial Area,
        Delhi Road,Kukas,
        Jaipur-302028.
        Tel. No. : 01426 - 414800, 227515, 227616, 227617
        Click Here To View Map
    

For more information contact: counsellor@pearlacademy.com, Toll Free No. 1800 103 3005

And here is the iframe on same page:

Rohit Azad Malik · Accepted Answer

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


 
Click Here To View Map

Live Demo

want to hide the iframe until link is clicked

Answers (2)

Related Questions