title: Is there any other way to display other text on website after clicking on "button"?
body: <p>so basically, I'm trying to make my own portfolio website but one of the things seems not to be working, here's my </p>
  
  <p><a href="https://codepen.io/anon/pen/jobpPd" rel="nofollow noreferrer">https://codepen.io/anon/pen/jobpPd</a></p>
  
  <p>basically what I want to do there is that I want after clicking "About" to show h1 "ABOUT ME" and disappear "My name" </p>
  
  <p>I wrote some javascript there but it seems not to  be working.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="particles-js"&gt;
      &lt;main id="main" class="flex-center flex-column"&gt;
          &lt;h1 id="title"&gt;My name&lt;/h1&gt;
          &lt;ul id="menu" class="list-unstyled list-inline"&gt;
              &lt;li class="list-inline-item"&gt;&lt;a href="#" onclick="OpenAbout()"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="list-inline-item"&gt;&lt;a href="" target="_blank"&gt;GitHub&lt;/a&gt;&lt;/li&gt;
          &lt;li class="list-inline-item"&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/main&gt;
  
          &lt;section id="about" class="d-none"&gt;
              &lt;h1&gt;ABOUT ME&lt;/h1&gt;
  
          &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin: 0;
  }
  
  #title {
      color: #ffffff;
      position: absolute;
      text-align: center;
      top: 30%;
      width: 100%;
      font-style: italic;
      font-size: 65px;
  }
  
  #menu {
      color: #ffffff;
      position: absolute;
      text-align: center;
      top: 48%;
      font-size: 13px;
      width: 98%;
  }
  
  #particles-js {
      background-color: #0d3677;
      height: 100vh;
  }
  
  #about {
      position: absolute;
      width: 100%;
  }
  
  section {
      max-height: 100vh !important; 
      overflow: auto; 
      opacity: 0;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function OpenAbout(){$("#main").animate({opacity:0,},160);$("#about").removeClass("d-none").animate({opacity:1,},160);}function OpenMain(){$("#main").animate({opacity:1,},160);$("#about").animate({opacity:0,},160,"swing",function(){$("#about").addClass("d-none");});}
  </code></pre>