How to hide everything in an iframe except for a child ID or Class

Author Posts


Hi… I have an iframe being displayed on a site (via a BB PowerPack modal). The iframe of course pulls in the full url page from the source.

What I would like to do is set visibility to hide everything on the iframe page except for a specific ID (or class) area.

So, if the lineage of the display is iframe > .class1 > .class2 > .class3 > #container > .class4 > .class5

I want to hide all the elements within the iframe but then allow everything that is within #container to show.

Is there a trick way that I can set the css to say
.class1 {visibility: hidden}
#container {visibility: visible}

This seems like it might be working, but maybe there is a better way or a more “correct” way?



Been playing with this some more. visibility: seems to work, but it leaves element space for the hidden elements.

I tried…
.class1 {display: none}
#container {display: block}

But that doesn’t seem to work. Unlike the visibility statement, it seems like the display statement doesn’t work on inner elements if the parent element is set to display:none.



Hey Norman,

You are correct, display:none can’t be overridden on child elements if it is set on a parent element. I always assumed the same was true of visibility:hidden until I read your last post.

One option might be to set the height and width of the parent elements you want to hide to zero (as well as using the visibility:hidden trick). As long as overflow:visible is set, the child #container element should still show. You might find using absolute or relative positioning helps here too. But I would need to have a look at your site to advise more specifically. So please feel free to share it.


You must login or register to reply to this topic.