HTML - How to make text disappear and make different text appear from a press of a button?
<p>So I'm trying to make this little "choice game" of sorts on this website.</p>

<p><a href="http://puu.sh/ncAr8/be095ee6e2.png" rel="nofollow">http://puu.sh/ncAr8/be095ee6e2.png</a></p>

<p>I got up to this but... when you click Sure, it brings you to another page. I don't want to do that.</p>

<p>Instead when you click Sure, I want the text and the button to disappear and different text/buttons to appear.</p>

<p>Here's my code. Excuse my poor HTML, I'm not so great.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name="theme-color" content="#18191b"&gt;
&lt;link rel="icon" sizes="192x192" href="assets/trans.gif"&gt;
&lt;title&gt;...&lt;/title&gt;
&lt;/head&gt;


&lt;div class="audio"&gt;
&lt;audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3"/&gt;
&lt;/div&gt;


&lt;div id="test"&gt;
&lt;center&gt;&lt;h1 class="center2"&gt;Do you want to join the campfire?&lt;br&gt; There is one person there... looking sad.&lt;/h1&gt;&lt;/center&gt;
&lt;/div&gt;
&lt;center&gt;&lt;a href="join1.html" class="center3"&gt;Sure.&lt;/a&gt;&lt;/center&gt;


&lt;div id="test"&gt;
&lt;center&gt;&lt;img class="center" src="assets/trans.gif"/&gt;&lt;/center&gt;
&lt;/div&gt;

&lt;style&gt;
    img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:block;
    position: relative;
    top: 200px;
    }
    h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
}
a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
}
#test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera &gt; 12.1 */
       -moz-animation: fadein 2s; /* Firefox &lt; 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera &lt; 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox &lt; 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera &gt; 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera &lt; 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
&lt;/style&gt;

&lt;body style="background-color:#18191b"&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>Please help me, I'm pretty bad at HTML and would love some advice as well. Thanks!</p>