What's new

Closed How to display an iframe by only clicking the button (HTML)

Status
Not open for further replies.

DetroitGuru

Forum Veteran
Joined
Oct 1, 2017
Posts
1,855
Reaction
3,100
Points
837
I am trying to display an iframe when a button is clicked. I got the following Javascript code:
JavaScript:
var iframeShowing = false;

function show(event) { event.preventDefault();
    var iframe1 = document.getElementById("myIframe").style.display = "none" : "block";
    iframeShowing = !iframeShowing;
}
And here is the HTML of my page:
HTML:
<button style="background-color: limegreen; border-radius: 4px; color: white; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 53px; text-align: center; text-decoration: none; width: 200px;" type="button" id="myIframe" onclick="show(event)">WATCH TRAILER</button>
HTML:
<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="https://www.YøùTùbé.com/embed/4Yq15X_gj9A" width="640"></iframe>
When I tested the code, it works but the iframe always showing even I don't click the button. Please help me, I'd research on google and tried different code but nothing works.

Thanks in advance for your answers.
 
Last edited:
<button id="hideshow">Click</button>
<div class="panel">
<iframe src="You do not have permission to view the full content of this post. Log in or register now." class="content" style="border:0;display:none"></iframe>
</div>
<script>
$(document).ready(function(){
$('#hideshow').on('click', function(event) {
$('.content').toggle('show');
});
});</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
 
oks naman yung 2nd HTML code pag try ko sa blogger
1.jpg
 

Attachments

Last edited:
Status
Not open for further replies.

Similar threads

Back
Top