Collapsible Content in jquery mobile

Question

I have a simple collapsible content element at the top of a page that has a list view. The html works fine.

My problem is that if a user opens the collapsible block, I'd like it to automatically close when the user leaves or comes back to the page. The collapsible block always remains as the user has left it--open. I don't know how to close it. I've searched for a couple of days, but can't find the exact scenario. Most of the solutions that I've found deal with dynamic loading of pages and they are a little too advanced for me to understand.

I know this is probably a simple thing, but I'm so new to jquery mobile. I don't know how to bind the code to the html element or where to put it so please work me though with baby steps.

Does anyone know how to do this?

Answer 1

Hi in my jqm web app I close programmatically collapsible block like this:

$('.ui-collapsible').trigger('collapse');

You should bind pageshow event like this :

$('#your_page_id').bind('pageshow', function(){

            $('.ui-collapsible').trigger('collapse');

       });  

for example you can try this jsFiddle