Trying to toggle a panel whilst changing the icon to 'view more' and 'view less'
<p>I've just started learning jQuery/javascript, so this might seem like a really basic question, but it's annoying me nevertheless.</p>

<p>I have a panel of 6 <code>&lt;li&gt;</code>s, 3 of which are hidden until clicking on the 'view more' link at which point the panel toggles to reveal the other 3. The icon is changing from 'more' to 'less', but then not changing back to 'more'. Can anyone see the problem in the code?</p>

<p>Any help would be greatly appreciated :)</p>

<p>Thanks,
David</p>

<pre><code>$(document).ready(function() {
  $('.allApps').hide();
  $('.moreAppsIcon').click(function() {
    $('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon");
    $(this).toggleClass("active");
    $('.allApps').slideToggle("slow");
    return false;
  });

  $('.lessAppsIcon').click(function() {
    $('.appsMore').slideToggle("slow", function () {
      $('.appsMore').removeClass("appsMore").addClass("moreAppsIcon");
      $(this).toggleClass("active");
      return false;
    });                             
  });
});
</code></pre>
