I have issue with collapsible jQuery mobile.
I'm using Multipage template, where all the pages are in the same document, separated with the div named page
. I have two Collapsible, one on each page
. I made an animation to the top of the page, my code is above:
$(document).on("pagecreate",function(event, ui){
// alert("pagecreate event fired - the page has been initialized, the DOM has been loaded and jQuery Mobile has finished enhancing the page.");
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(300);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(300);
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
}
});
$('.ui-collapsible-heading-toggle').click(function(){
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
});
In the first collapsible animation works, but in the second, only the animations slideUp
and slideDown
work, with offset
nothing happens.
Why??
Thanks for help!