Added demo URL.
[ReadingsJQM.git] / snippets / collapsibles.html
1 <!--
2         jQuery Mobile Boilerplate
3         /snippets/collapsibles.html
4 -->
5 <!doctype html>
6 <html>
7 <head>
8         <title> jQuery Mobile Boilerplate - Collapsibles Content</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.0.1/jquery.mobile-1.0.1.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.6.4.min.js"></script>
24         <script src="/js/mobileinit.js"></script>
25         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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 Content</h1>
34                 </div>
35
36                 <div data-role="content">
37
38
39
40
41 <h2>Collapsible Content Blocks</h2>
42
43 <div data-role="collapsible">
44         <h3>Content header</h3>
45         <p>I'm the content that shows/hides when you click the header just above me.</p>
46 </div>
47
48 <h2>Default to open</h2>
49
50 <div data-role="collapsible" data-collapsed="false">
51         <h3>Content header</h3>
52         <p>I'm the content that shows/hides when you click the header just above me.</p>
53 </div>
54
55 <h2>Themed</h2>
56
57 <div data-role="collapsible" data-content-theme="c">
58         <h3>Content header</h3>
59         <p>I'm the content that shows/hides when you click the header just above me.</p>
60 </div>
61
62 <h2>Themed - content only</h2>
63
64 <div data-role="collapsible" data-theme="b" data-content-theme="e" >
65         <h3>Content header</h3>
66         <p>I'm the content that shows/hides when you click the header just above me.</p>
67 </div>
68
69 <h2>Nested Collapsibles</h2>
70
71 <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
72         <h3>Outer header</h3>
73         <p>I'm the content inside the main collapsible.</p>
74         
75         <div data-role="collapsible" data-theme="c" data-content-theme="c">
76                 <h3>I'm a nested collapsible with a child collapsible</h3>
77                 <p>I'm a child collapsible.</p>
78                 <div data-role="collapsible" data-theme="d" data-content-theme="d">
79                         <h3>Nested inside again.</h3>
80                         <p>Three levels deep now.</p>
81                 </div>
82         </div>
83
84         <div data-role="collapsible" data-content-theme="c">
85                 <h3>Collapsed list</h3>
86                 <ul data-role="listview" data-inset="true" data-theme="d">
87                         <li><a href="index.html">red</a></li>
88                         <li><a href="index.html">blue</a></li>
89                         <li><a href="index.html">yellow</a></li>
90                 </ul>
91         </div><!-- /section 3 -->
92 </div>
93
94
95
96                 </div>
97                 
98                 <div data-role="footer" data-theme="c">
99                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
100                 </div>  
101                 
102         </div>
103 </body>
104 </html>