The last widget we will discuss is the Panel widget. The Panel widget sits on the left or right-hand side of your page and can be shown or hidden dynamically. Because of the limited "real estate" on mobile devices, panels are a nice way to hide navigation or other content until the user requests it.
Creating a panel in jQuery Mobile is simple. First, add a new
<div> block with a
data-role of panel. This must be done inside the
div that defines your page, and should be outside of the content region.
Code 7-10 demonstrates an example of this.
Code 7-10: test_panel.html <div data-role="page" id="first"> <div data-role="panel" id="leftPanel"> This is the left panel. <p> <a data-role="button" data-rel="close">Close</a> </p> </div> ...