Show More / Less

Show More / Less

Trying to expand / contract the contents of a div using show more / less.  When I select 'more' the list expands and the action link is now set to 'less.'.  When I select 'less', again, the list contracts as expected , but the action link is not resetting to 'more.'  I can't seem to figure out where I'm going wrong....

  2. $(document).ready(function() {
  3.     $('#refinements div').each(function(){
  4.         var hiddenElements = $(this).children('p:gt(10)').hide();
  5.         if (hiddenElements.size() > 0) {
  6.             var showCaption = 'more';
  7.             $(this).children('p:gt(10)').hide();
  8.             $(this).after('<a style="color:red;" href="#" class="more">' + showCaption + '</a>');
  9.         }
  10.     });
  11.   
  12.     $('.more').click(function(e){
  13.         e.preventDefault();
  14. $(this).prev('div').children('p:gt(10)').slideToggle();
  15.         $(this).text('less');
  16.     },
  17.     function() {
  18.         hiddenElements.hide();
  19.         $(this).text(showCaption);
  20.     }); 
  21. });