Question

I’m using Jquery mobile and doing some custom stuff.

The default collapsible object just seems to ‘show’ the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.

In my mind two things should happen.

1. The content should slideDown().
2. I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.

Any pointers in how I might go about doing either of these?

Answer 1

If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.

$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {                        
    $('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});