Question

I have the following code:

<td class="select-cli-numbers"><div class="explanationText" style="cursor:pointer;">Click here to select numbers</div></td>

which when toggled, I want to display as
Click here to hide CLI numbers

my js is as follows, but doesn’t work. ANy ideas?

$(".select-cli-numbers").toggle(function () {
            $('#cli-numbers').show();
            $(this).text() = "Click here to hide CLI numbers"
    }, function () {
            $('#cli-numbers').hide();
            $(this).text() = "Click here to show CLI numbers"
        });

Answer 1

You’ve just a slight problem with your syntax.

$(".select-cli-numbers").toggle(function () {
  $('#cli-numbers').show();
  $(this).children().text("Click here to hide CLI numbers");
}, function () {
  $('#cli-numbers').hide();
  $(this).children().text("Click here to show CLI numbers");
});

text() takes a text string and sets the element’s text node to that.