title: if element hasClass change innerHTML
body: <p>I am trying to toggle the text inside the <strong><code>.info_toggle</code></strong> class using an <strong><code>if</code></strong> condition. I am stuck and would very much appreciate it if someone could help me to understand why my current code doesn't work. </p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$( '.info_toggle').click(function() {
    $("body").toggleClass( "info-page-open" );
  });
  
  
  if ('info-page-open') {
    $('.info_toggle').text('CLOSE');
  } else  {
    $('.info_toggle').text('INFO');
  }
  </code></pre>
  
  <p><strong>CSS:</strong>
  </p>
  
  <pre><code>.info_toggle {
      position: absolute;
      top:15px;
      left:20px;
      z-index: 6;
      color: #000;
  }
  
  
  .info-page {
      width: 100%;
      height:100%;
      position: absolute;
      top:0px;
      left:0px;
      background-color: rgb(0,0,0, .5);
      z-index: 5;
      opacity: 0;
      z-index: 0;
      transition: all 0.25s ease-in;
  }
  
  body.info-page-open .info-page {
      opacity: 1.0;
      z-index: 5;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;body&gt;
  
  &lt;a href="#" class="info_toggle"&gt;INFO
      &lt;/a&gt;
  
    &lt;div class="info-page"&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>