How to show pages on right side with panel in jquery mobile - jquery-mobile

Question

I am able to implement panel .But i need my pages should display with panel.Actually when i click panel button's then it hide panel .show page on whole screen .But i need to show page with panel.
Here is my code.
http://jsfiddle.net/ravi1989/TXRjk/2/
Jump to second page
Jump to third page
First Page
Next
Open Pannel
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>

Answer 1

I think it should be what you're wanting:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to index page
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3 id="header-page">
First Page
</h3>
</div>
<div data-role="content" id="content-page">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-page">
.
</div>
</div>
<div class="soHide" id="index">
<div data-theme="a" data-role="header">
<h3 id="header-index">
First Page
</h3>
</div>
<div data-role="content" id="content-index">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-index">
.
</div>
</div>
<div class="soHide" id="second">
<div data-theme="a" data-role="header">
<h3 id="header-second">
Second Page
</h3>
</div>
<div data-role="content" id="content-second">
<p>this is a second page</p>
<a data-role="button" href="#mypanel">Open Pannel again</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-second">
footer second page
</div>
</div>
<div class="soHide" id="third">
<div data-theme="a" data-role="header">
<h3 id="header-third">Third Page</h3>
</div>
<div data-role="content" id="content-third">
<a data-role="button" id="open-panel">Open Pannel one more time</a>
<p>it's third!</p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-third">
it's some third footer page
</div>
</div>
and this javascript:
$(document).on('click', '.btnPages', function(){
var page = $(this).attr('data-idpage');
var header = $("#header-"+page).html();
var content = $("#content-"+page).html();
var footer = $("#footer-"+page).html();
// apply
$("#header-page").html(header).trigger('create');
$("#content-page").html(content).trigger('create');
$("#footer-page").html(footer).trigger('create');
});
and this css:
.ui-panel-animate {
transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }
and this functional example http://jsfiddle.net/wgbn/Hxy37/