title: Toggle span text on click with jQuery
body: <p>I'm trying to write a reusable script for toggling the text of an element on click.</p>
  
  <p>I have it working on click but I can't get it to toggle back. Is there something wrong with my if statement?</p>
  
  <pre><code>&lt;span class="js-textEdit" data-text="Show less"&gt;Show more&lt;/span&gt;
  
  
  $('.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);
    }
  });
  </code></pre>
  
  <p>Here's a <a href="http://jsfiddle.net/MzcMa/" rel="nofollow">JSFIddle</a></p>
  
  <p>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?</p>