Filter Collapsible Set And Collapsible Children

Description

The filter widget can also be used on collapsible set and collapsible children.

Example

Following example demonstrates the use of filterable collapsible set and collapsible children in jQuery Mobile.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Filterable collapsible set and collapsible children</title>
      <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>
      <form>
         <input data-type = "search" id = "searchForCollapsibleSetChildren">
      </form>
      
      <div data-role = "collapsibleset" data-filter = "true" data-children = "> div, 
         > div div ul li" data-inset = "true" id = "collapsiblesetForFilterChildren" 
         data-input = "#searchForCollapsibleSetChildren">
         
         <div data-role = "collapsible" 
            data-filtertext = "India Bengaluru Chennai Mumbai New Delhi">
            <h3>India</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "India Bengaluru">Bengaluru</li>
               <li data-filtertext = "India Chennai">Chennai</li>
               <li data-filtertext = "India Mumbai">Mumbai</li>
               <li data-filtertext = "India New Delhi">New Delhi</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "Australia Canberra Sydney Perth Melbourne">
            <h3>Australia</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "Australia Canberra">Canberra</li>
               <li data-filtertext = "Australia Sydney">Sydney</li>
               <li data-filtertext = "Australia Perth">Perth</li>
               <li data-filtertext = "Australia Melbourne">Melbourne</li>
            </ul>
         </div>
      
         <div data-role = "collapsible" 
            data-filtertext = "United Kingdom London Birmingham Cardiff Glasgow">
            <h3>United Kingdom</h3>
            <ul data-role = "listview" data-inset = "false">
               <li data-filtertext = "United Kingdom Canberra">London</li>
               <li data-filtertext = "United Kingdom Birmingham">Birmingham</li>
               <li data-filtertext = "United Kingdom Cardiff">Cardiff</li>
               <li data-filtertext = "United Kingdom Glasgow">Glasgow</li>
            </ul>
         </div>
      </div>
      
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as filterable_collapsible_set_children.html file in your server root folder.

  • Open this HTML file as http://localhost/filterable_collapsible_set_children.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements