Filter Collapsible Set And Collapsible Children


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


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

<!DOCTYPE html>
      <title>Filterable collapsible set and collapsible children</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "">
      <script src = ""></script>
      <script src = ""></script>

         <input data-type = "search" id = "searchForCollapsibleSetChildren">
      <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">
            <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>
         <div data-role = "collapsible" 
            data-filtertext = "Australia Canberra Sydney Perth Melbourne">
            <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>
         <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>


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.

Kickstart Your Career

Get certified by completing the course

Get Started