Jquery Mobile - Nested Listview

    The Jquery Mobile listview is nothing but a ul-li HTML structure styled to appear as a list on a web browser. The plain ul-li structure can be modified to create the nested listview structure. Take a look at the example below, to understand the nested listview structure of Jquery Mobile.



    By nesting child ul or ol inside list items, you can create nested lists. When a list item with a child list is clicked, the Jquery Mobile framework will show a new page populated with the title of the parent in the header and the list of child elements. These dynamic nested lists are styled with the "b" theme swatch (blue in the default theme) to indicate that you are in a secondary level of navigation.

    Lists can be nested multiple levels deep and all pages and linking will be automatically handled by the framework. Note that the page of each nested listview is created when the parent page loads and for each nested page the page-events will trigger.

    Hope you followed the post and can now implement the nested lists in your Jquery Mobile project. Drop a comment in case you have any doubts and I would try and answer those.