# jQuery Mobile Panels Panels in jQuery Mobile will slide out from the left side of the screen to the right. Create a panel by adding the data-role="panel" attribute to a

element with a specified id. Add HTML markup inside the

to display your panel content:

Panel Header..

Text content..

**Note:** The panel markup must be placed before or after the page composed of the header, content, and footer. To access the panel, you need to create a link pointing to the id of the panel

, clicking this link will open the panel: Open Panel Simple Panel Example ## Example

Panel Header..

Panel Content..

Standard Page Header

Click the button below to open the panel.

Open Panel

Footer Text

[Try it »](#) * * * ## Closing Panels You can close the panel by clicking the area outside the panel, pressing the Esc key, or swiping. You can disable closing by swiping and clicking using the data-* attributes: | Attribute

YouTip

Jquerymobile Panels

Panel Header..

Panel Header..

Standard Page Header

Footer Text

📂 Categories