snippets/collapsible-sets.html

   1 <!--
   2         jQuery Mobile Boilerplate
   3 -->
   4 <!doctype html>
   5 <html>
   6 <head>
   7         <meta charset="utf-8">
   8         <meta name="viewport" content="width=device-width, initial-scale=1">
   9         <title> jQuery Mobile Boilerplate </title>
  10         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
  11
  12         <!-- if you have a custom theme, add it here -->
  13         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
  14
  15         <link rel="stylesheet" href="css/custom.css" />
  16
  17         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  18         <script src="js/application.js"></script>
  19         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
  20
  21 </head>
  22 <body>
  23         <div data-role="page">
  24
  25                 <div data-role="header">
  26                         <a href="../index.html" data-icon="home">Home</a>
  27                         <h1>Collapsible Sets</h1>
  28                 </div>
  29
  30                 <div data-role="content">
  31
  32
  33
  34
  35 <h2>Collapsible Sets</h2>
  36
  37 <div data-role="collapsible-set">
  38         <div data-role="collapsible" data-collapsed="false">
  39                 <h3>Section 1</h3>
  40                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  41         </div>
  42         <div data-role="collapsible">
  43                 <h3>Section 2</h3>
  44                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  45         </div>
  46         <div data-role="collapsible">
  47                 <h3>Section 3</h3>
  48                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  49
  50         </div>
  51 </div>
  52
  53 <h2>Theming Sets</h2>
  54
  55 <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
  56         <div data-role="collapsible" data-collapsed="false">
  57                 <h3>Section 1</h3>
  58                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  59         </div>
  60         <div data-role="collapsible">
  61                 <h3>Section 2</h3>
  62                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  63         </div>
  64         <div data-role="collapsible">
  65                 <h3>Section 3</h3>
  66                 <p>I'm the collapsible content in a set so this feels like an accordion.</p>
  67
  68         </div>
  69 </div>
  70
  71
  72
  73
  74                 </div>
  75
  76                 <div data-role="footer" data-theme="c">
  77                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
  78                 </div>
  79
  80         </div>
  81 </body>
  82 </html>