title: jQuery: Change text and class on click while preserving the child elements
body: <p>I'm trying to do a simple "toggle" like function with jQuery but I can’t seem to get it to work quite the right way.</p>
  
  <p>I've a HTML block which looks like this:</p>
  
  <pre><code>&lt;li class="item-actions-follow"&gt;
      &lt;a href="#" id="follow" class="icon small-icon circle_plus"&gt;
          &lt;i&gt;&lt;/i&gt;
              Follow
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I would like to, when a user clicks on the link "Follow" to change the class <strong>circle_plus</strong> on the a <code>href</code> tag to <strong>circle_minus</strong> and to change the text <strong>Follow</strong> to <strong>Unfollow</strong> and vice versa.</p>
  
  <p>I tried some different things but they all come close but not exactly what I want.</p>
  
  <p>Within a jQuery event "onclick" I do this:</p>
  
  <pre><code>var text = $("a#follow").text() == 'Follow' ? 'Unfollow' : 'Follow';
  $("a#follow").text(text);
  </code></pre>
  
  <p>That did change the text "Follow" to "Unfollow" but not back when I clicked the link again <strong>and</strong> it removed the tag <code>&lt;i&gt;&lt;/i&gt;</code> which is essentially to display the icon which is provided by the <strong>circle_plus</strong> class.</p>
  
  <p>I also tried to do a pure Toggle (I later found out that the Toggle function does not work on text but only properties), like this:</p>
  
  <pre><code>$("a#follow").toggle
  function() {
  $("a#follow").text("Unfollow");
  $(this).removeClass('circle_plus').addClass('circle_minus').stop();
        },
        function() {
          $("a#follow").text("Follow");
          $(this).removeClass('circle_minus').addClass('circle_plus').stop();
        });
  </code></pre>
  
  <p>When I do this and click the link, it just “fade” out the text and icon all together, doesn’t even change the class.</p>
  
  <p>I also tried the <code>.toggleClass()</code> function but with no luck.</p>
  
  <p>I'm relatively new to jQuery so it might be a simple task but I've looked wide for a solution but with no luck so far.</p>
  
  <p>Hope you can help me pointing me in the right direction.</p>