jQM 1.4 filter open collapsible

by Erik Zanker

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<div data-role="page" id="page">
     <div data-role="header">
        <h1>AJAX Created List</h1> 
    </div> 	
    <div role="main" class="ui-content">
        <h1>Collapsible set with search</h1>
        <div data-role="collapsible-set" >
	        <div id="filterMe" data-role="listview" data-inset="true" data-filter="true">
                <div data-role="collapsible">
                    <h1>Numero uno</h1>
                    <div>some text</div>
				</div>
                <div data-role="collapsible">
                    <h1>Number two</h1>
                    <div>some text</div>
				</div>
				<div data-role="collapsible">
                    <h1>Numero three <div>Grade: 25% (8th of 128)</div></h1>
                    <div>some potato</div>
				</div>
                <div data-role="collapsible">
                    <h1>Number four</h1>
                    <div>some text</div>
				</div>
			</div>
		</div>


    </div> 
</div>

JavaScript

$(document).on("pagecreate", "#page", function(){
    $("#filterMe").on( "filterablefilter", function( event, ui ) {
        ui.items.each(function( index ) {
              $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");
            
        });
    });
});