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>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Filterable Collapsible Set</h1></div>
    <form>
            <input data-type='search' id='searchForCollapsibleSet'>
    </form>
        <div data-role='collapsibleset' data-filter='true' data-inset='true' data-input='#searchForCollapsibleSet'>
            <div data-role='collapsible' data-filtertext='Animals'>
                <h3>Animals</h3>
                <ul data-role='listview' data-inset='false'>
                    <li>Cats</li>
                    <li>Dogs</li>
                    <li>Lizards</li>
                    <li>Snakes</li>
                </ul>
            </div>
            <div data-role='collapsible' data-filtertext='Cars'>
                <h3>Cars</h3>
                <ul data-role='listview' data-inset='false'>
                    <li>Acura</li>
                    <li>Audi</li>
                    <li>BMW</li>
                    <li>Cadillac</li>
                </ul>
            </div>
            <div data-role='collapsible' data-filtertext='Planets'>
                <h3>Planets</h3>
                <ul data-role='listview' data-inset='false'>
                    <li>Earth</li>
                    <li>Jupiter</li>
                    <li>Mars</li>
                    <li>Mercury</li>
                </ul>
            </div>
        </div>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
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 >>