How to hide an iframe until a button is clicked?

See more:

Javascript

HTML

IFrame

I have a content area in which I would like to display some text when the page first loads or when the 'biography' button is clicked. When a different button is clicked (AFT) I would like to display the content of a URL via an iframe in the content area. I'm new to coding so not really sure how to achieve this.

With my code currently the text appears but the iframe appears underneath this, but I want the iframe to replace the text when the button is clicked. The function toShow() should do this but I don't know where to start. Any help is appreciated!

What I have tried:

HTML code:

<div id="content" > 
    <script src="myJS.js"></script>
    <script> displayBiography(); </script>

    <iframe src="cwExample.pdf" name="iframe1" id="pdf"></iframe>
    </div>

    <div id="leftBar"> 
    <br><br>
    <button class="button" onclick="displayBiography();"> Biography 
    </button>
    <h3> Samples of Work </h3>
    <button class="button" onclick="toShow();" 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;
        var iframe = document.getElementById('pdf');
        iframe.style.display = 'none';
    }

    function toShow() {
    }