slideUp() and slideDown() not working inside .delegate()

Question

I am developing a website using JQM. I have dynamically created a collapsible via AJAX data. Now, I want to make the collapsible slideup and down smoothly (JQuery mobile). The problem is .delegate function is getting executed, but its using the default sliding speed and not changing. My code is :

$('#search-page').delegate('.menu-collapse','expand', function (event) {
      $(this).children().slideDown(300);
  }).delegate('.menu-collapse','collapse', function (event) {
    $(this).children().next().slideUp(300);
      event.stopPropagation();
});

I think some problem with $(this). Can anyone sort it out ? Thanks in Advance.

Answer 1

try , thats work exactly as you want now

$(document).on('pageinit',function(event){
    $('[data-role="collapsible"]').bind('expand', function (event) {

        $(this).find('.ui-collapsible-content')
               .css('display','none')
               .slideDown(300, function(){
                  $(this).css('display','block');
                });

    }).bind('collapse', function (event) {  

       $(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')
              .slideUp(300);    
    });
});

FIDDLE HERE

Answer 2

I think, you need to find way, how you can animate collapsible set, not why delegate not working
see questions like this , and try it out.
But i can't repeat this, because it's bit different.