The next 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 for them.
Creating a panel in jQuery Mobile is simple. First, add a new <div> block with data-role of panel. This must be done inside the div block that defines your page, and should be outside of the content region. The code in Listing 7-10 demonstrates an example of this:
Listing 7-8: 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>
<div data-role="header">
<h1>Test Panel</h1>
</div>
<div role="main" class...