Hello,

I am using the following script to toggle the amount of list items shown.

It works great, but instead of .toggle, I want to animate the toggle with .slideToggle, but it's not working.

You can see the code here http://jsbin.com/ekolo/edit and below

Code:
$(function() {
  
  var hiddenElements = $('.facet ul li:gt(6)').hide();
  
  if (hiddenElements.size() > 0) {
      var showCaption = '...' + hiddenElements.size() + ' More Choices';
      $('.facet ul').append(
          $('<li id="toggler">' + showCaption + '</li>')
              .toggle(
                  function() {
                      hiddenElements.show();
                      $(this).text('...Fewer Choices');
                  },
                  function() {
                      hiddenElements.hide();
                      $(this).text(showCaption);
                  }
              )
      );
  }
});


I have changed it the following with no avail:

Code:
$(function() {
  
  var hiddenElements = $('.facet ul li:gt(6)').hide();
  
  if (hiddenElements.size() > 0) {
      var showCaption = '...' + hiddenElements.size() + ' More Choices';
      $('.facet ul').append(
          $('<li id="toggler">' + showCaption + '</li>')
              .slideToggle('slow',
                  function() {
                      hiddenElements.show();
                      $(this).text('...Fewer Choices');
                  },
                  function() {
                      hiddenElements.hide();
                      $(this).text(showCaption);
                  }
              )
      );
  }
});
And help appreciated.

Thank you.