Updated the readme file.
[ReadingsJQM.git] / snippets / collapsibles.html
1 <!doctype html>
2 <html>
3 <head>
4         <meta charset="utf-8">
5         <meta name="viewport" content="width=device-width, initial-scale=1">
6         <title> jQuery Mobile Boilerplate </title>
7         <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
8
9         <!-- if you have a custom theme, add it here -->
10         <link rel="stylesheet"  href="themes/jQuery-Mobile-Boilerplate.css" />
11
12         <link rel="stylesheet" href="css/custom.css" />
13
14         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
15         <script src="js/application.js"></script>
16         <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
17         
18 </head> 
19 <body> 
20         <div data-role="page">
21
22                 <div data-role="header">
23                         <a href="../index.html" data-icon="home">Home</a>
24                         <h1>Collapsible Content</h1>
25                 </div>
26
27                 <div data-role="content">
28
29
30
31
32 <h2>Collapsible Content Blocks</h2>
33
34 <div data-role="collapsible">
35         <h3>Content header</h3>
36         <p>I'm the content that shows/hides when you click the header just above me.</p>
37 </div>
38
39 <h2>Default to open</h2>
40
41 <div data-role="collapsible" data-collapsed="false">
42         <h3>Content header</h3>
43         <p>I'm the content that shows/hides when you click the header just above me.</p>
44 </div>
45
46 <h2>Themed</h2>
47
48 <div data-role="collapsible" data-content-theme="c">
49         <h3>Content header</h3>
50         <p>I'm the content that shows/hides when you click the header just above me.</p>
51 </div>
52
53 <h2>Themed - content only</h2>
54
55 <div data-role="collapsible" data-theme="b" data-content-theme="e" >
56         <h3>Content header</h3>
57         <p>I'm the content that shows/hides when you click the header just above me.</p>
58 </div>
59
60 <h2>Nested Collapsibles</h2>
61
62 <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
63         <h3>Outer header</h3>
64         <p>I'm the content inside the main collapsible.</p>
65         
66         <div data-role="collapsible" data-theme="c" data-content-theme="c">
67                 <h3>I'm a nested collapsible with a child collapsible</h3>
68                 <p>I'm a child collapsible.</p>
69                 <div data-role="collapsible" data-theme="d" data-content-theme="d">
70                         <h3>Nested inside again.</h3>
71                         <p>Three levels deep now.</p>
72                 </div>
73         </div>
74
75         <div data-role="collapsible" data-content-theme="c">
76                 <h3>Collapsed list</h3>
77                 <ul data-role="listview" data-inset="true" data-theme="d">
78                         <li><a href="index.html">red</a></li>
79                         <li><a href="index.html">blue</a></li>
80                         <li><a href="index.html">yellow</a></li>
81                 </ul>
82         </div><!-- /section 3 -->
83 </div>
84
85
86
87                 </div>
88                 
89                 <div data-role="footer" data-theme="c">
90                         <p>&copy; 2012 - jQuery Mobile Boilerplate</p>
91                 </div>  
92                 
93         </div>
94 </body>
95 </html>