Here we see Step by step How to create a jQueryMobile Accordion and Collapsibles For Android and BlackBerryIn this tutorial we build in 15 minutes a complete jQuery Mobile App , with Collapsible content and an Accordion, for use on all kind of Mobile screens :iPhone, Nexus , Acer , BlackBerry, Nokia, and more...
This Mobile will look like this:
How to create a jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry
Since for this post we use the jQuery Mobile , which needs the jQuery Frameworks, enter http://jquerymobile.com/ and the jQuery web site , to get the latest versions of the files on CDN . We will also be using a Mobile Emulator, therefore please refer to this tutorial on installing the Ripple Emulator.
Create a Page with a Header including a NavBar , using data-role="page" and data-role="header" fixed :
1) Collapsible Content with Nested collapsible block:
Now we create a Collapsible content using data-role="collapsible" with a nested collapsible block inside it:
2) Collapsible Accordion:
Now we create an Accordion using the directive data-role=collapsibleset, wrapping several collapsible block defined as we did before, as follows:
Just for the sake of the example, we add a Form in the second collapsible block:
That's all. Just for completing a Mobile App, we add a Footer with a NavBar as follows: