2010-10-13 21:39:54 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-03-31 13:11:26 +00:00
< title > jQuery Mobile Docs - Collapsible Content< / title >
2011-01-06 00:19:24 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
< script src = "../../js/" > < / script >
2010-10-13 21:39:54 +00:00
< / head >
< body >
2011-03-10 03:36:14 +00:00
< div data-role = "page" >
2010-10-13 21:39:54 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "header" data-theme = "b" >
2010-10-13 21:39:54 +00:00
< h1 > Collapsible content< / h1 >
2011-03-10 03:36:14 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-13 21:39:54 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" >
2010-10-13 21:39:54 +00:00
< h2 > Collapsible content markup< / h2 >
2011-03-10 03:36:14 +00:00
< p > To create a collapsible blocks of content, create a container and add the < code > data-role="collapsible"< / code > attribute.< / p >
2010-10-13 21:39:54 +00:00
< p > Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.< / p >
2010-10-16 03:14:21 +00:00
< p > After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.< / p >
2010-10-13 21:39:54 +00:00
< pre > < code >
2011-03-10 03:36:14 +00:00
< div data-role=" collapsible" >
2010-10-13 21:39:54 +00:00
< h3> I' m a header< /h3>
2010-10-16 03:14:21 +00:00
< p> I' m the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.< /p>
2010-10-13 21:39:54 +00:00
< /div>
2010-11-16 11:31:44 +00:00
< / code > < / pre >
2010-10-13 21:39:54 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" >
2010-10-16 03:14:21 +00:00
< h3 > I'm a header< / h3 >
< p > I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.< / p >
< / div >
2011-03-10 03:36:14 +00:00
< p > As the example notes, by default the content will be expanded. To collapse the content when the page loads, add the < code > data-collapsed="true"< / code > attribute to the wrapper.< / p >
2010-10-13 21:39:54 +00:00
< code >
2011-03-10 03:36:14 +00:00
< div data-role=" collapsible" < strong > data-collapsed=" true" > < / strong >
2010-10-13 21:39:54 +00:00
< / code >
< p > This code will create a collapsible widget like this:< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-13 21:39:54 +00:00
< h3 > I'm a header< / h3 >
2010-10-16 03:19:27 +00:00
< p > I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.< / p >
2010-10-13 21:39:54 +00:00
< / div >
2010-10-16 03:18:09 +00:00
< p > Collapsible content is minimally styled — we add only a bit of margin between the bar and content, and the header adopts the default Theme styles of the container it sits within.< / p >
2010-10-13 21:39:54 +00:00
< h2 > Collapsible example< / h2 >
< p > This page has 4 collapsible containers with different types of content inside.< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-13 21:39:54 +00:00
< h3 > Section 1: Collapsed text block< / h3 >
2011-03-10 03:36:14 +00:00
< p > I'm closed when the page loads because I have the < code > data-collapsed="true"< / code > attribute on my container. < / p >
2010-10-13 21:39:54 +00:00
< p > I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. < / p >
< / div > <!-- /section 1 -->
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" >
2010-10-13 21:39:54 +00:00
< h3 > Section 2: Expanded on load< / h3 >
2011-03-10 03:36:14 +00:00
< p > I'm open when the page loads because I don't have the < code > data-collapsed="true"< / code > attribute on my container. < / p >
2010-10-13 21:39:54 +00:00
< p > I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.< / p >
< / div > <!-- /section 2 -->
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-13 21:39:54 +00:00
< h3 > Section 3: Form elements< / h3 >
< form action = "#" method = "get" >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-10-13 21:39:54 +00:00
< label for = "textarea" > Textarea:< / label >
< textarea cols = "40" rows = "8" name = "textarea" id = "textarea" > < / textarea >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-10-13 21:39:54 +00:00
< label for = "slider" > Input slider:< / label >
< input type = "range" name = "slider" id = "slider" value = "0" min = "0" max = "100" / >
< / div >
< fieldset class = "ui-grid-a" >
2011-03-10 03:36:14 +00:00
< div class = "ui-block-a" > < button type = "submit" data-theme = "c" > Cancel< / button > < / div >
< div class = "ui-block-b" > < button type = "submit" data-theme = "b" > Submit< / button > < / div >
2010-10-13 21:39:54 +00:00
< / fieldset >
< / form >
< / div > <!-- /section 3 -->
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-13 21:39:54 +00:00
< h3 > Section 4: Collapsed list< / h3 >
2011-03-10 03:36:14 +00:00
< ul data-role = "listview" data-inset = "true" data-theme = "d" >
2010-10-13 21:39:54 +00:00
< li > < a href = "index.html" > Acura< / a > < / li >
< li > < a href = "index.html" > Audi< / a > < / li >
< li > < a href = "index.html" > BMW< / a > < / li >
< li > < a href = "index.html" > Cadillac< / a > < / li >
< li > < a href = "index.html" > Chrysler< / a > < / li >
< li > < a href = "index.html" > Dodge< / a > < / li >
< li > < a href = "index.html" > Ferrari< / a > < / li >
< li > < a href = "index.html" > Ford< / a > < / li >
< / ul >
< / div > <!-- /section 4 -->
2010-10-23 14:20:06 +00:00
< h2 > Nested Collapsibles< / h2 >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" >
2010-10-23 14:20:06 +00:00
< h3 > I'm a header< / h3 >
< p > I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" >
2010-10-23 14:20:06 +00:00
< h3 > I'm a nested collapsible header< / h3 >
< p > I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.< / p >
< / div >
< / div >
2010-10-13 21:39:54 +00:00
2010-10-23 14:20:06 +00:00
< h2 > Collapsible sets< / h2 >
2011-03-10 03:36:14 +00:00
< p > By giving a parent element a data-role of collapsible-set, you can cause other collapsibles within that parent to close whenever a new one is opened, acting like an accordion widget:< / p >
2010-10-13 21:39:54 +00:00
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible-set" >
< div data-role = "collapsible" >
2010-10-23 14:20:06 +00:00
< h3 > I'm a header in a set of collapsibles< / h3 >
< p > I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.< / p >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-23 14:20:06 +00:00
< h3 > I'm a header in a set of collapsibles< / h3 >
< p > I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.< / p >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "collapsible" data-collapsed = "true" >
2010-10-23 14:20:06 +00:00
< h3 > I'm a header in a set of collapsibles< / h3 >
< p > I'm the collapsible content. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.< / p >
< / div >
< / div >
2010-10-13 21:39:54 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
