jQuery expand collapsible list view on filter

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 here, but specifically I'm filtering a collapsible listview widget, not a collapsible widget. Any help would be much appreciated!

html:

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

javascript:

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

Answers


I would check if any listview items are visible after the filter and then expand/collapse based on that:

$(".filterMe").on("filterablefilter", function (event, ui) {
    var anyVisible = false;
    ui.items.each(function( index ) {
        if (!$(this).hasClass("ui-screen-hidden")){
            anyVisible = true;
        }
    });
    $(this).collapsible("option", "collapsed", !anyVisible);
});

DEMO


Need Your Help

php recursion level

php arrays zend-framework recursion

I have the recursion function. There are an hierarchy users structure. I send a user id to my function and it should find all user under this. Function returns an array of all associates users. My ...