JQuery mobile panel, click on go back is redirecting to previous page, not collapsing the panel

Question

When the “panel” is enabled and then I click on the back button of the mobile device, I am redirected to the previous page, rather than the "panel" being hidden. How do I make the back button hide the panel?

Answer 1

Use .panel('close') when you click on back button. Give it an ID and use the code below.

Demo

$(document).on('click', '#close', function () {
 $('#panel-ID').panel('close');
});

Answer 2

You can simply give a back button on the panel which doesn't even need a script to be written for it or otherwise if we tap or click anywhere other on the screen besides the panel area, the would disappear easily. Check the file on this link for reference. http://www.2shared.com/document/KyJI_PiF/fiddle.html