jQuery: Change button text on click

Question

After seeing Toggling button text in jquery this question, I tried to re create it in my situation but can't seem to have it work.

Here is a fiddle of what I've done: http://jsfiddle.net/V4u5X/

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore');
    if($this.hasClass('.SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

It seems to only ever run the if statement once. What am I missing?

possible duplicate of [Button text toggle in jquery](http://stackoverflow.com/questions/13652835/button-text-toggle-in-jquery) — Ram, Oct 14 '13 at 17:06

score 46 · Accepted Answer · answered Oct 14 '13 at 17:05

46

$('.SeeMore2').click(function(){
    var $this = $(this);
    $this.toggleClass('SeeMore2');
    if($this.hasClass('SeeMore2')){
        $this.text('See More');         
    } else {
        $this.text('See Less');
    }
});

This should do it. You have to make sure you toggle the correct class and take out the "." from the hasClass

http://jsfiddle.net/V4u5X/2/

answered Oct 14 '13 at 17:05

Kierchon

2,271
1
19
24

*facepalm* I misunderstood how the argument worked for .toggleClass. I assumed that you would specify a seperate class within the (). In my original it still has the class of SeeMore2, now that I look at it. Thanks for the help! – Scherf Oct 14 '13 at 17:08
Doesn't work on archives which contain multiple entries with more than 1 instance of the same button. @Scherf – Dev Sep 28 '17 at 00:56

score 7 · Answer 2 · answered Aug 12 '16 at 08:53

try this, this javascript code to change text all time to click button.http://jsfiddle.net/V4u5X/2/

html code

<button class="SeeMore2">See More</button>

javascript

$('.SeeMore2').click(function(){
        var $this = $(this);
        $this.toggleClass('SeeMore2');
        if($this.hasClass('SeeMore2')){
            $this.text('See More');         
        } else {
            $this.text('See Less');
        }
    });

Naresh Kumar · Answer 3 · 2014-07-02T07:12:20.773

2

its work short code

$('.SeeMore2').click(function(){ var $this = $(this).toggleClass('SeeMore2'); if($(this).hasClass('SeeMore2')) { $(this).text('See More'); } else { $(this).text('See Less'); } });

edited Jul 02 '14 at 07:12

answered Jul 02 '14 at 07:06

Naresh Kumar

345
3
6

score 2 · Answer 4 · answered Sep 10 '18 at 08:21

In HTML:

<button type="button" id="AddButton" onclick="AddButtonClick()" class="btn btn-success btn-block ">Add</button>

In Jquery write this function:

    function AddButtonClick(){ 
      //change text from add to Update
      $("#AddButton").text('Update');
    }

score 2 · Answer 5 · edited Apr 30 '21 at 11:07

2

Use :

$("button").click(function(){
  $(this).html("the new text");
});

edited Apr 30 '21 at 11:07

Minal Chauhan

6,025
8
21
41

answered Apr 29 '21 at 23:58

adel.N

31
3

score 1 · Answer 6 · answered Oct 14 '13 at 17:05

This should work for you:

    $('.SeeMore2').click(function(){
        var $this = $(this);
        $this.toggleClass('SeeMore2');
        if($this.hasClass('SeeMore2')){
            $this.text('See More');         
        } else {
            $this.text('See Less');
        }
});

jQuery: Change button text on click

6 Answers6

Linked