jQuery Mobile: Filter Collapsible Set

This entry is part 33 of 73 in the series jQuery Mobile

I have never seen an app that use this UI but if you have thought of a way to use it, here is the code.

Filter Collapsible Set
<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Filterable Collapsible Set</h1></div>
            <input data-type='search' id='searchForCollapsibleSet'>
        <div data-role='collapsibleset' data-filter='true' data-inset='true' data-input='#searchForCollapsibleSet'>
            <div data-role='collapsible' data-filtertext='Animals'>
                <ul data-role='listview' data-inset='false'>
            <div data-role='collapsible' data-filtertext='Cars'>
                <ul data-role='listview' data-inset='false'>
            <div data-role='collapsible' data-filtertext='Planets'>
                <ul data-role='listview' data-inset='false'>

    <div data-role='footer' data-position='fixed'>
Try The Code

To use filterable collapsible set, we use the attribute data-role=’collapsibleset’.

The input box needs to have data-type=’search’ and its id is pointing towards the collapsible set.

Series Navigation<< jQuery Mobile: Table Filter
jQuery Mobile: Filter Reveal >>

Leave a comment

Leave a Reply