jQuery expand collapsible list view on filter
<p>I have several collapsed listviews. These can be filtered by an input field. At the moment, they're all collapsed and need to be opened individually after filtering. I'd like filtering to open them automatically. My question is very similar to this one <a href="https://stackoverflow.com/questions/22172248/automatically-open-filtered-collapsible-set-items-jquery-mobile" title="here">here</a>, but specifically I'm filtering a collapsible listview widget, not a collapsible widget. Any help would be much appreciated!</p>

<p>html:</p>

<pre><code>    &lt;form class="ui-filterable"&gt;
        &lt;input id="filterBasic-input" data-type="search"&gt;
    &lt;/form&gt;
    &lt;div class="filterMe" data-role="collapsible" data-inset="true" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u"&gt;
        &lt;h2&gt;Foods&lt;/h2&gt;
        &lt;ul data-role="listview" data-filter="true" data-input="#filterBasic-input"&gt;
            &lt;li data-role="list-divider"&gt;Fruits&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Apple&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Orange&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Banana&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Grapes&lt;/a&gt;&lt;/li&gt;
            &lt;li data-role="list-divider"&gt;Vegies&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Carrot&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Lettuce&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Pumpkin&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Celery&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;  
    &lt;div class="filterMe" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u"&gt;
        &lt;h2&gt;Things&lt;/h2&gt;
        &lt;ul data-role="listview" data-filter="true" data-input="#filterBasic-input"&gt;
            &lt;li data-role="list-divider"&gt;Kitchen things&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Plates&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Bowls&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Cutlery&lt;/a&gt;&lt;/li&gt;
            &lt;li data-role="list-divider"&gt;Office things&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Pens&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Paper&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#""&gt;Computer&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>javascript:</p>

<pre><code>$(document).on("pageshow", "#usagePicker", function () {
    $(".filterMe").on("filterablefilter", function (event, ui) {
        $(".ui-collapsible:not(.ui-screen-hidden)").collapsible("option", "collapsed", false);
    });
});
</code></pre>