Add transitions to collapsible content

[jimdoescode]

It would be nice to have a data attribute to specify a transition on collapsible elements.

something like:

<div data-role="collapsible" data-transition="slide">
.....
</div>

This would make the content slide up or down when opened or closed.

[jblas]

@jimdoescode

Yeah animations would be cool. The current set of transition animations might not work as expected though since they use CSS transforms which don't actually modify the dimensions of what they animate. So if folks are expecting the content to actually push things down as it grows, we might need to have a different set of animations.

[toddparker]

Yeah, a good idea to consider. Can you add a link to this issue to the feature request wiki page here on github and we'll re-open if.when we decide to tackle this.

[jimdoescode]

It's added. Thanks

[jerone]

Would be nice if this feature could be added.

For now I have worked around this by writing the following code (http://jsfiddle.net/jerone/gsNzT/):

/*\
Animate collapsible set;
\*/
$(document).one("pagebeforechange", function () {

    // animation speed;
    var animationSpeed = 200;

    function animateCollapsibleSet(elm) {

        // can attach events only one time, otherwise we create infinity loop;
        elm.one("expand", function () {

            // hide the other collapsibles first;
            $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse");

            // animate show on collapsible;
            $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function () {

                // trigger original event and attach the animation again;
                animateCollapsibleSet($(this).parent().trigger("expand"));
            });

            // we do our own call to the original event;
            return false;
        }).one("collapse", function () {

            // animate hide on collapsible;
            $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function () {

                // trigger original event;
                $(this).parent().trigger("collapse");
            });

            // we do our own call to the original event;
            return false;
        });
    }

    // init;
    animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']"));
});

[toddparker]

Thanks for the example code @jerone, I'm sure some people will want to know how to do that. The reason we don't animate collapsibles currently is that this is fairly intensive for a mobile device to do, especially if the collapsible is part of a longer page because it needs to re-flow for each step in the animation. I can see us adding this at some point when the devices are a bit better.