Toggle span text on click with jQuery

Question

I'm trying to write a reusable script for toggling the text of an element on click.

I have it working on click but I can't get it to toggle back. Is there something wrong with my if statement?

<span class="js-textEdit" data-text="Show less">Show more</span>


$('.js-textEdit').click(function() {
  var oldText = $(this).text();
  var newText = $(this).attr('data-text');

  if ($(this).text(oldText)) {
    $(this).text(newText);
  } else {
    $(this).text(oldText);
  }
});

Here's a JSFIddle

Also, is there a cleaner way to refactor this? Rather than use IDs and have to write a separate script for every element I want to use it on, I'm using a data attribute to determine the new text. Is the data attribute method a good approach?

when you click on the button for the second time old text is what currently in it, bind the current text to the element using data. api.jquery.com/jQuery.data — Millard
– Millard, Commented Mar 12, 2014 at 17:21

j08691 · Accepted Answer · 2014-03-12 17:33:18Z

4

$('.js-textEdit').click(function () {
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $(this).text(newText).data('text',oldText);
});

jsFiddle example (and a slightly better example to show how it works on multiple elements )

edited Mar 12, 2014 at 17:33

answered Mar 12, 2014 at 17:27

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

j08691 Over a year ago

@Moppy - My approach had to be smart? Ug, you never mentioned that you wanted it to be smart too ;)

colmtuite Over a year ago

Well, it was my approach really. Let's not get carried away here. All you did was move some things around :)

Senthilmurugan · Accepted Answer · 2014-03-12 17:22:09Z

1

You have to set the data-set to old text.

   $(this).attr('data-text',oldText);

JS Fiddle

answered Mar 12, 2014 at 17:22

Senthilmurugan

3831 silver badge14 bronze badges

Collectives™ on Stack Overflow

Toggle span text on click with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related