jQM 1.4 filter open collapsible

by juErik

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</h1>
          <div>some potato</div>
        </div>
        <div data-role="collapsible">
          <h1>Number four</h1>
          <div>some text</div>
        </div>
      </div>
    </div>


  </div>
</div>

JavaScript

/* expandiert über einen Filter:
   bei übereinstimmung Filter LIKE Col-Titel expandieren die betroffenen Cols
*/
$(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");

    });
  });
});