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