jquery checking and changing button value

Question

$("button").click(function() {  if ($("#showHideButton").val() == "Read More2")
  $("#showHideButton").val(function(){
    return "Read Less"
 });});

I'm trying to get a button to toggle values.

Please show your HTML. Ideally, make a [stack snippet](http://meta.stackoverflow.com/questions/270944/feedback-requested-stack-snippets-2-0) that demonstrates the problem. — Barmar, Jul 01 '15 at 20:32
Why do you use a function for just returning "Read Less"? Also you should use "===" in favor of "==" as a rule of thumb - in this case it might not matter but in others it will for sure. So it is recommend to get into the habit of using just "===". — Florian Loch, Jul 01 '15 at 20:50

score 0 · Answer 1 · answered Jul 01 '15 at 20:49

The code is self explanatory.

Working example:

$("button").click(function () {
    if ($("#showHideButton").text() == "Read More")
        $("#showHideButton").text("Read Less");
    else
        $("#showHideButton").text("Read More");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showHideButton">Read More</button>

score 0 · Answer 2 · answered Jul 01 '15 at 21:07

You could do something like this:

$("button").on('click', function() {
  if($(this).text() == 'Read More') {
      $(this).text('Read Less');
  } else {
      $(this).text('Read More');
  }
});

Arguably, switch/case is performs better than if/else, so if you are crazy worried about overhead, you could do that. I wouldn't worry about it, though, since it's something so simple. You probably couldn't even see a difference between the two.

jquery checking and changing button value

2 Answers2