How to show only specific item when filtering collapsible set in jQuery mobile - jquery-mobile

Question

Hi I am using jQuery mobile to build a mobile web application.
And I am learning from this page.
Specifically, how can I display children when I filter in collapsible set?
For example, from the example code, when I enter cats, it gives me back Animal blocks. I need to click it then see the cats. Is there any ways I can display only cats (or in another words: how can auto expand corresponding blocks?) when I search cats.
<form>
<input data-type="search" id="searchForCollapsibleSetChildren">
</form>
<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="Animals Cats Dogs Lizards snakes">
<h3>Animals</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Animals Cats">Cats</li>
<li data-filtertext="Animals Dogs">Dogs</li>
<li data-filtertext="Animals Lizards">Lizards</li>
<li data-filtertext="Animals Snakes">Snakes</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac">
<h3>Cars</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Cars Acura">Acura</li>
<li data-filtertext="Cars Audi">Audi</li>
<li data-filtertext="Cars BMW">BMW</li>
<li data-filtertext="Cars Cadillac">Cadillac</li>
</ul>
</div>
<div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury">
<h3>Planets</h3>
<ul data-role="listview" data-inset="false">
<li data-filtertext="Planets Earth">Earth</li>
<li data-filtertext="Planets Jupiter">Jupiter</li>
<li data-filtertext="Planets Mars">Mars</li>
<li data-filtertext="Planets Mercury">Mercury</li>
</ul>
</div>
</div>

Answer 1

You can use the filterablefilter event (see API) to execute some JS after each search:
$(document).on("filterablefilter", "#collapsiblesetForFilterChildren", function(event)
{
var results = $("[data-role=collapsible]:visible");
if (results.length !== 0)
$(results[0]).collapsible("expand");
});
This code expands the first collapsible in the result set (if present).
JSFiddle