Creating Sliding Panels in jQuery Mobile

You probably noticed that there are many mobile applications that make use of a panel that slide from the side of the screen and display additional information –typically more navigation options. These sliding panels are very useful since the allow a quick display of information that is typically accessible from any where in the application.

jQuery Mobile 1.3.0 now introduced an enhanced version of the Panels Widget. The new version can reveal content, giving the impression that the panel has always been underneath the active view. You can also specify the panel to be pushed which makes the panel feel like an extension of the current page. Finally, a panel can be setup as reveal, this will simple overlay the panel on top of the visibel content. You can also make the panel appear from the left or from the right.

Here is how you can open a panel using Javascript:


Open a panel from an anchor tag by linking to the panel ID:


Left or Right

If you would like to open the panel in an specific side of the screen, you must specified the the attribute data-position in the main panel container, and indicate in which side you with the panel to open:


jQuery Mobile - widget Panel



Read more about jQuery Mobile Panels


I want to learn more about advanced customization of the Sliding Panel

  • (required)
  • Should be Empty:
In a nutshell: we DO NOT share your information with anyone. Learn more about our Privacy Policy.


Here is a great video tutorial form  that explains in detailes how to build a panel:

What do you think of this post?

2 Responses to “Creating Sliding Panels in jQuery Mobile”

  1. DenimTornado July 22, 2013 at 1:11 pm #

    Hi! Thank you for that tutorial. Can you tell me please, how to open/close panel with data-role=”content” or data-role=”page”?

    • sanraul July 23, 2013 at 12:30 pm #

      A sliding panel must have its own data-role (panel). I believe you cannot assign two roles to the same element. By default a sliding panel must be a child a jQM page. I am sure you can use Javascript to manipulate the DOM and transform a page into a panel –that might by an interesting tutorial ;-).

Leave a Reply