JQuery Mobile Collapsable Slide Transition

Question

Has anyone been able to add a slide transition to the JQuery Collapsible property?

I am trying to make a list that is collapsable with data-inset="false", and when the user taps the menu item, the collapsed section slides out.

Here is an example of what I am trying to do (but with JQuery Mobile instead), however, in this example, the transition is not as smooth as I would like it: http://www.designgala.com/demos/collapse-expand-jquery.html

Ideas?

Note: I have seen other posts with a similar objective, however, none of the posts used the transition I described, they used a fade.

Answer 1

Here's a very simple and concise bit of JS that I use to animate my collapsible sets.

$(document).on('pageinit', function(){
    $("[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);
        }

    });
});

Here's a demo in JSFiddle.