0

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.

Omar
  • 32,302
  • 9
  • 69
  • 112
Jake Chasan
  • 6,290
  • 9
  • 44
  • 90
  • do you have any example code that we could help fix up? I would suggest placing your data inside of a div that has `overflow:hidden` then animating the container div open while the div inside of it stretches to the right height – ntgCleaner Mar 20 '14 at 20:24
  • I was actually wondering if someone could provide some example code, as I am not sure where to start with the transitions. – Jake Chasan Mar 20 '14 at 20:25
  • take a look at jQuery `.slideUp` and `.slideDown` https://api.jquery.com/slideUp/. These both work with mobile and are pretty smooth if you do them correctly – ntgCleaner Mar 20 '14 at 20:27
  • possible duplicate of [Custom animation for collapsible set not working in jQuerymobile 1.4.0](http://stackoverflow.com/questions/21417176/custom-animation-for-collapsible-set-not-working-in-jquerymobile-1-4-0) – Omar Mar 22 '14 at 22:39

1 Answers1

5

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.

Noah Ratcliff
  • 115
  • 2
  • 8
  • Hmm, this did not work for me without giving pageinit a page argument. – StevieD May 18 '15 at 15:17
  • Actually, the problem is that I'm trying to get this to work on collapsibles that are injected to dom via ajax after pageinit event, I think. – StevieD May 18 '15 at 16:08