Как скрыть iframe до тех пор, пока не будет нажата кнопка?

---

У меня есть область содержимого, в которой я хотел бы отобразить некоторый текст при первой загрузке страницы или при нажатии кнопки "биография". При нажатии другой кнопки (AFT) я хотел бы отобразить содержимое URL-адреса через iframe в области содержимого. Я новичок в кодировании, поэтому не совсем уверен, как этого добиться.

В моем коде в настоящее время текст появляется, но под ним появляется iframe, но я хочу, чтобы iframe заменял текст при нажатии кнопки. Функция toShow() должна это сделать, но я не знаю, с чего начать. Любая помощь будет оценена по достоинству!

Что я уже пробовал:

HTML-код:

<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:

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() {
    }

---