CODEWITHSUNDEEP
jquery
user1038814
user1038814

Reputation: 9647

change text on click jquery

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

Upvotes: 2

Views: 7870

Answers (3)

Robin Whittleton
Robin Whittleton

Reputation: 6339

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.

Upvotes: 4

adeneo
adeneo

Reputation: 318182

Since the toggle() function you are using is deprecated, I'd go for a click function instead:

$(".select-cli-numbers").on('click', function() {
    var msg = $('#cli-numbers').toggle().is(':visible')?'hide':'show';
    $('.explanationText', this).text("Click here to "+msg+" CLI numbers");
});​

FIDDLE

Upvotes: 1

Brendon
Brendon

Reputation: 51

that should be like this

$(document).ready(function() {
    $(".explanationText").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");
    });


});

Upvotes: 1

Related Questions