JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page">
    <div data-role="header">
         <h1>Problem nested list views</h1>

    </div>
    <div data-role="content">
        <div class="content-primary">
            <ul data-role="listview" data-inset="true" data-divider-theme="d" data-filter="true" id="eServiceList">
                <li data-role="list-divider" id="dpw">DPW</li>
                <li><a href="#" class="dpw">Inbox</a>

                </li>
                <li><a href="#" class="dpw">Outbox</a>

                </li>
                <li data-role="list-divider" id="custo">Customs</li>
                <li><a href="#" class="custo">Friends</a>

                </li>
                <li><a href="#" class="custo">Work</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

.hide {
    display: none !important
}

JavaScript

var hide = 0;
var dpwClone = '';
$(function () {
    $('[data-role="list-divider"]').click(function (element) {
        $(this).nextUntil('[data-role="list-divider"]').toggleClass('hide');
        $("#eServiceList").listview("refresh");
    });

    $("#eServiceList").listview("option", "filterCallback", searchList);

    function searchList(text, searchValue, item) {
        var result = text.toString().toLowerCase().indexOf(searchValue.toString().toLowerCase());
        var show = false;
        var hide = true;

        if (result == -1) return hide;

        return show;
    }
});