title: HTML - How to make text disappear and make different text appear from a press of a button?
body: <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>