How to hide an element of an iframe that is loaded on some page (parent page) (CSS, JQuery)

Sometimes you want to load the Iframe on the page but don't want to display all items.

Hiding elements with CSS

In order to avoid pronlems with hiding that item. It would be great of you can assign it and id for example: #po-navbar.

#po-navbar {
display: none;
}

in WordPress you can do that just for some page
.page-template-lostpassword #po-navbar {
display: none;
}

In order to find that class you can just check the body tag of that page:

Hiding elements with JQuery

$('#po-navbar').hide();

here is another option
$('iframe').contents().find("#your_div_id").hide();

NOTE: this one didn't work in my case (for some reason) although I was loading the Iframe from the same domain.


Leave a Reply

Your email address will not be published. Required fields are marked *