- jQuery Mobile Tutorial
- jQuery Mobile - Home
- jQuery Mobile - Overview
- jQuery Mobile - Setup
- jQuery Mobile - Pages
- jQuery Mobile - Icons
- jQuery Mobile - Transitions
- jQuery Mobile - Layouts
- jQuery Mobile - Widgets
- jQuery Mobile - Events
- jQuery Mobile - Forms
- jQuery Mobile - Themes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Data Attributes
- jQuery Mobile Useful Resources
- jQuery Mobile - Interview Questions
- jQuery Mobile - Quick Guide
- jQuery Mobile - Useful Resources
- jQuery Mobile - Discussion
jQuery Mobile - Listview Collapsible Item Flat
Description
Collapsibles are the basic and easy widget to display short content. Using custom CSS, you can create collapsible list items to collapse borders and padding.
Example
Following example demonstrates the use of listview collapsible list items in the jQuery Mobile.
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <h2>Regular listview</h2> <ul data-role = "listview"> <li data-role = "collapsible" data-iconpos = "right"> <h2>Choose Your State</h2> <fieldset data-role = "controlgroup" data-type = "horizontal"> <label>Karnataka<input type = "checkbox"></label> <label>Maharastra<input type = "checkbox"></label> <label>Tamil Nadu<input type = "checkbox"></label> </fieldset> </li> <li data-role = "collapsible" data-iconpos = "right" data-inset = "false"> <h2>Tamil Nadu</h2> <ul data-role = "listview" data-theme = "b"> <li><a href = "#">Chennai</a></li> <li><a href = "#">Coimbator</a></li> <li><a href = "#">Madurai</a></li> <li><a href = "#">Vellore</a></li> <li><a href = "#">Ooty</a></li> </ul> </li> <li data-role = "collapsible" data-iconpos = "right" data-inset = "false"> <h2>Karnataka</h2> <ul data-role = "listview" data-theme = "b"> <li><a href = "#">Bangalore</a></li> <li><a href = "#">Belgaum</a></li> <li><a href = "#">Hubli</a></li> <li><a href = "#">Mangalore</a></li> <li><a href = "#">Dharwad</a></li> </ul> </li> <li> <a href = "#"><h2>Maharastra</h2></a> </li> </ul> <h2>Inset listview</h2> <ul data-role = "listview" data-inset = "true" data-shadow = "false"> <li data-role = "collapsible" data-iconpos = "right" data-inset = "false"> <h2>Choose Your State</h2> <fieldset data-role = "controlgroup" data-type = "horizontal"> <label>Karnataka<input type = "checkbox"></label> <label>Maharastra<input type = "checkbox"></label> <label>Tamil Nadu<input type = "checkbox"></label> </fieldset> </li> <li data-role = "collapsible" data-iconpos = "right" data-inset = "false"> <h2>Tamil Nadu</h2> <ul data-role = "listview"> <li><a href = "#">Chennai</a></li> <li><a href = "#">Coimbator</a></li> <li><a href = "#">Madurai</a></li> <li><a href = "#">Vellore</a></li> <li><a href = "#">Ooty</a></li> </ul> </li> <li data-role = "collapsible" data-iconpos = "right" data-inset = "false"> <h2>Karnataka</h2> <ul data-role = "listview"> <li><a href = "#">Bangalore</a></li> <li><a href = "#">Belgaum</a></li> <li><a href = "#">Hubli</a></li> <li><a href = "#">Mangalore</a></li> <li><a href = "#">Dharwad</a></li> </ul> </li> <li> <a href = "#"><h2>Maharastra</h2></a> </li> </ul> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as listview_collapsible_list_items.html file in your server root folder.
Open this HTML file as http://localhost/listview_collapsible_list_items.html and the following output will be displayed.
jquery_mobile_widgets.htm
Advertisements