1

I am currently struggling with a collapsible set in Jquery Mobile. I want it animated when opening/closing as well as to slide up to the top of the screen when opened. It was working earlier in the project, but somehow stopped working down the line..

I have tried everything to find the problem without luck; The problem still persists without my CSS-sheets, and is still there without the added JS-coding. I have also tried different versions of jQuery and Jquery Mobile (and in different combinations) - still nothing.

I made a jsfiddle with all the relevant coding: https://jsfiddle.net/usa8bjh1/

This is the code I am using:

$(document).on('pagebeforeshow', function(){
$("[data-role='collapsible']").collapsible({
    expand: function(event, ui){
        $(this).children().next().slideDown(500);
        $('html, body').animate({
            scrollTop: $(this).offset().top - 0
        }, 800);
    },
    collapse: function(event, ui){
        $(this).children().next().slideUp(500);
    }
});
});

Does anyone have any experience with this?

shvoldum
  • 11
  • 2
  • Use jQM 1.45 and `pagecontainershow` event with some delay `setTimeout` for the animation. – Omar Mar 31 '16 at 15:38
  • Thanks for your input - not quite sure how to implement the setTimeout, could you help me out with a suggestion on this? – shvoldum Apr 01 '16 at 09:14

1 Answers1

0

I have updated your fiddle with a working solution, binding the collapsible events this way:

$(document).on("collapsibleexpand", "[data-role=collapsible]", function () {
    $(this).children().next().slideDown(500);
    $('html, body').animate({
        scrollTop: $(this).offset().top - 0
    }, 800);
});

$(document).on("collapsiblecollapse", "[data-role=collapsible]", function () {
    $(this).children().next().slideUp(500);
});
jcarrera
  • 1,007
  • 1
  • 16
  • 23
  • Thanks for the updated code! However, I still can't get the opening and closing of the collapsibles to animate.. Any idea why? – shvoldum Apr 01 '16 at 09:09