How to display a iframe when a button is clicked via javascript?

[katiejeynes]

I have a content area in which I would like to display some text when the page loads and when a button is clicked (biography). When another button is clicked (AFT) I would like this text to be replaced by the content of a URL via an iframe.

At the moment I have managed to get the text to appear when the page loads, however I can't get the iframe to replace the text when the AFT button is clicked. Can someone help me?

HTML code:

<div id="content" > <script src="https://bytes.com/myJS.js"></script> <script> displayBiography(); </script> <iframe src="https://bytes.com/cwExample.pdf" name="iframe" id="iframe1"></iframe> </div> <div id="leftBar"> <br><br> <button class="button" onclick="displayBiography();"> Biography </button> <h3> Samples of Work </h3> <button class="button" onclick="toShow(#iframe1);" target="iframe1"> AFT </button> </div>

JS code:

var content = document.getElementById("content");
var biography = "<p> text here</p>"
	    ;

function displayBiography() {
	"use strict";
	content.innerHTML = biography;
}
	
window.onload = function() {
	var iframe = document.getElementById('iframe1');
	iframe.style.display = 'none';
}

function toShow() {
	var iframe = document.getElementsByName('iframe');
	iframe.style.display = 'block';
	content.innerHTML = iframe;
}

[RockybBalboa]

You can do this from jQuery .html() method.

On the button click you have show the iframe inside the div. THe code will be something like:

$("#buttonId").click(function(){
    $("#content").html("<iframe></iframe>");
});