how to add 2 panels

how to add 2 panels

Hello
I try to create 2 Panels, but I don't know what is the problem

can you help me

  1. <html lang="ar">
  2. <head>
  3.   <meta charset="utf-8">
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <title>panel demo</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  8.   <script src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  9.   <style>
  10.   .panel-content {
  11.     padding:15px;
  12.   }
  13.   </style>
  14. </head>
  15. <body>
  16.  
  17. <div data-role="page" id="page1">
  18.   <div data-role="header">
  19.   <a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars">Left</a>
  20.     <h1>jQuery Mobile Example</h1>
  21.     <a href="#defaultpanel2" data-role="button" data-inline="true" data-icon="bars">Right</a>
  22.   </div>
  23.   <div data-role="content">
  24.   test test test
  25.   </div>
  26.  
  27.   <!-- defaultpanel  -->
  28.   <div data-role="panel2" id="mypanel" data-position="right" data-display="push">
  29.   <h3>Default panel options</h3>
  30.       <p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
  31.       <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
  32.       <a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
  33. </div>
  34.   <div data-role="panel" id="defaultpanel2" data-theme="b">
  35.  
  36.     <div class="panel-content">
  37.       <h3>Default panel options</h3>
  38.       <p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
  39.       <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
  40.       <a href="#demo-links" data-rel="close" data-role="button" data-theme="c" data-icon="delete" data-inline="true">Close panel</a>
  41.     </div><!-- /content wrapper for padding -->
  42.   </div><!-- /defaultpanel -->
  43. </div>
  44.  
  45. </body>
  46. </html>