Add custom animation to collapsible set in jQuery mobile

Question

I have a collapsible set in my jQuery mobile 1.4.0 I want to add a custom animation for this collapsible set when it expands like animation here

my collapsible set at JSFiddle

I have used the following styles to animate the collapsible but it didn't give me the same result.How can I apply this slide down/up animation to my collapsible when its expanded ?

please help me ..

.ui-collapsible-content {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  height: 2em;
  overflow: hidden;
 }

.ui-collapsible-content-collapsed {
  display: block;
  height: 0;
  padding: 0 16px;
}

Answer 1

Here is my code

$("[data-role='collapsible']").collapsible({

    collapse: function( event, ui ) {
        $(this).children().next().slideUp(150);
    },
    expand: function( event, ui ) {
        $(this).children().next().hide();
        $(this).children().next().slideDown(150);
    }

});

This code was tested with jquery mobile 1.4.0. Thanks.