<html lang="en">
<head>
<title>Hide element inside iframe using javascript</title>
</head>
<body>
<p>Click on the <b>Hide Div</b> button to hide the div element inside the iframe.</p>
<button onclick="hideDiv()">Hide Div</button>
<iframe id="iframe-id" src="https://search.3schools.in/p/example.html" style="height:370px;width:100%"> </iframe>
<script>
function hideDiv() {
var myIframe = document.getElementById("iframe-id");
var divElement = myIframe.contentWindow.document.querySelector("#div");
divElement.style.display = "none";
}
</script>
</body>
</html>
<button id='hideshow'>Link1</button>
<div class="panel">
<iframe src="linkcodehere" class="content" style="border:0;display:none"></iframe>
<br/>
<p class="content" style="display:none;">some stuff</p>
<p class="content" style="display:none;">more stuff</p>
</div>
<button id="hideshow2">Link2</button>
<div class="panel2">
<iframe src="linkcodehere2" class="content2" style="border:0; display:none;"></iframe>
<br/>
<p class="content2" style="display:none;">some stuff</p>
<p class="content2" style="display:none;">more stuff</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>$(document).ready(function(){
$('#hideshow').on('click', function(event) {
$('.content').toggle('show');
});
});
$(document).ready(function(){
$('#hideshow2').on('click', function(event) {
$('.content2').toggle('show');
});
});