How to make side panel static on the page in jquery mobile

Question

at present am using side panel in which on click of a button only it gets visible where as it has to be displayed all the time on the page. Is it possible. and also when side panel is shown some part of page has been not visible where as it should get adjusted to screen by showing all.

Can someone help me please thanks.

<div data-role="page" id="pageone" class="type-interior">
    <div data-role="content" style="padding:0em;">

        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>

        <div class="content-primary">
//here page content was there
</div>
<div data-role="panel" data-position="left" data-position-fixed="true" data-display="reveal" id="nav-panel" data-theme="a">
</div>
</div>

Answer 1

According to the jQuery mobile documentation:

A panel must be a sibling to the header, content, and footer elements inside a jQuery Mobile page.

Also, the panel is hidden by default, but you can open it in the pagecreate event:

• HTML:

   <div data-role="page" id="pageone" class="type-interior"> <div class="ui-content" style="padding:0em;"> <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a> <div class="content-primary"> //here page content was there </div> </div> <div data-role="panel" data-position="left" data-dismissible="false" id="nav-panel" data-theme="a"> <p>Test</p> </div> </div> 

• JS:

   $(document).on('pagecreate', function() { $("#nav-panel").panel("open"); }); 

Here is the demo .