Page 50 - JqueryMobile_Manual
P. 50

50

                   <h1>Insert Footer Text Here</h1>
                 </div>
               </div>

               </body>
               </html>

                                        Expand the content when the page loads
                                                 tryjqmob_collapsible_false.html
               <!DOCTYPE html>
               <html>
               <head>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
               <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
               <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
               </head>
               <body>

               <div data-role="page" id="pageone">
                 <div data-role="header">
                   <h1>Expanded Collapsible Blocks</h1>
                 </div>

                 <div data-role="main" class="ui-content">
                   <div data-role="collapsible" data-collapsed="false">
                     <h1>Click me - I'm collapsible!</h1>
                     <p>I'm now expanded by default.</p>
                   </div>
                 </div>

                 <div data-role="footer">
                   <h1>Insert Footer Text Here</h1>
                 </div>
               </div>

               </body>
               </html>

                                                 Nested collapsible blocks
                                                tryjqmob_collapsible_nested.html
               <!DOCTYPE html>
               <html>
               <head>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
               <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
               <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
               </head>
               <body>

               <div data-role="page" id="pageone">
                 <div data-role="header">
                   <h1>Nested Collapsible Blocks</h1>
                 </div>
                 <div data-role="main" class="ui-content">
   45   46   47   48   49   50   51   52   53   54   55