title: If HTML text equals value, onclick change
body: <p>Okay, I have tried a few ways of doing this but nothing has worked. I am hoping someone here can tell me what I am doing wrong. Below is a step-by-step of what I am trying to achieve.</p>
  
  <p><code>#info-NUMBER-btn</code> displays <code>Click to display more information</code>.<br>
  <code>#info-NUMBER</code> CSS is set to <code>display: none</code>.</p>
  
  <p>When <code>#info-NUMBER-btn</code> is clicked:<br>
  - Corresponding <code>#info-NUMBER-btn</code> displays <code>Click to display less information</code>.<br>
  - Corresponding <code>#info-NUMBER</code> CSS is set to <code>display: inline-block</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Jquery */
  
  $(document).ready(function() {
       $("#info-1-btn").text("Click to display more information");
       $("#info-2-btn").text("Click to display more information");
       $("#info-3-btn").text("Click to display more information");
       $("#info-4-btn").text("Click to display more information");
       $("#info-5-btn").text("Click to display more information");
       
       if($("#info-1-btn").text("Click to display more information")) {
        $("#info-1-btn").click(function () {
         $(this).text("Click to display less information");
         $("#info-1").css("display", "inline-block");
        });
       } else if($("#info-1").text("Click to display less information")) {
        $("#info-1-btn").click(function() {
         $(this).text("Click to display more information");
         $("#info-1").css("display", "none");
        });
       }
       
       
       if($("#info-2-btn").text("Click to display more information")) {
        $("#info-2-btn").click(function () {
         $(this).text("Click to display less information");
         $("#info-2").css("display", "inline-block");
        });
       } else {
        $("#info-2-btn").click(function() {
         $(this).text("Click to display more information");
         $("#info-2").css("display", "none");
        });
       }
       
       
       if($("#info-5-btn").text("Click to display more information")) {
        $("#info-5-btn").click(function () {
         $(this).text("Click to display less information");
         $("#info-5").css("display", "inline-block");
        });
       } else {
        $("#info-5-btn").click(function() {
         $(this).text("Click to display more information");
         $("#info-5").css("display", "none");
        });
       }
      }); </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML --&gt;
  &lt;div id="info-5" class="hire-equipment-more-information"&gt;
    &lt;table class="hire-equipment-more-information-table" cellpadding="15px"&gt;
      &lt;tr&gt;
        &lt;th&gt;Length:&lt;/th&gt;
        &lt;th&gt;Material:&lt;/th&gt;
        &lt;th&gt;HP:&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;7.5m&lt;/td&gt;
        &lt;td&gt;Aluminium&lt;/td&gt;
        &lt;td&gt;225&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;a id="info-5-btn" class="hire-equipment-item-link"&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>