Jesse Jesse - 2 months ago 7
HTML Question

If HTML text equals value, onclick change

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.

#info-NUMBER-btn
displays
Click to display more information
.

#info-NUMBER
CSS is set to
display: none
.

When
#info-NUMBER-btn
is clicked:

- Corresponding
#info-NUMBER-btn
displays
Click to display less information
.

- Corresponding
#info-NUMBER
CSS is set to
display: inline-block
.



/* 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");
});
}
});

<!-- HTML -->
<div id="info-5" class="hire-equipment-more-information">
<table class="hire-equipment-more-information-table" cellpadding="15px">
<tr>
<th>Length:</th>
<th>Material:</th>
<th>HP:</th>
</tr>
<tr>
<td>7.5m</td>
<td>Aluminium</td>
<td>225</td>
</tr>
</table>
</div>
<br />
<a id="info-5-btn" class="hire-equipment-item-link"></a>




Answer

Lets examine this line of code

if($("#info-1-btn").text("Click to display more information")) {

This should be:

if($("#info-1-btn").text() === "Click to display more information")) {

The text function is an overloaded function. If you pass in no value, it will return you the text inside the element.

If you pass in a value, it will modify the text, and return the jQuery object again (which will be a truthy value).

Now lets look at your overall logic.

Your code is testing the state of the buttons once, when the document loads. It should be testing the state of the button as part of the click handler.

See this complete code example: http://plnkr.co/edit/HLsLcKrRY3OqK6w44bXp?p=preview

It might not match your requirements exactly, but it demonstrates how you test the state of the button inside a click handler.

It also demonstrates how you can use a custom attribute (in this case, data-target) to link a button to a div block.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>

<body>
  <button class="toggleButton" data-target="buttonOneInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonOneInfo">
    Here's some information about the first item
  </div>
  <button class="toggleButton" data-target="buttonTwoInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonTwoInfo">
    Here's some information about the second item
  </div>
  <button class="toggleButton" data-target="buttonThreeInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonThreeInfo">
    Here's some information about the third item
  </div>


</body>

<script type="text/javascript">
  $(function() {
    $('.toggleTarget').hide();
    $(".toggleButton")
      .text("Click to display more information")
      .click(function() {
        var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));

        if ($(this).text() === 'Click to display more information') {
          $(this).text('Click to display less information');
          toggleTarget.show();
        } else {
          $(this).text('Click to display more information');
          toggleTarget.hide();
        }
      });
  });
</script>

</html>