JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible" id="c" data-theme="b" data-content-theme="e">
             <h2>Click to load new data</h2> 
            <ul data-role="listview" id="lv"></ul>
        </div>
    </div>
</div>

JavaScript

var items = "<li><a href='#'>Item one</a></li><li><a href='#'>Item two</a></li>";

$(".ui-collapsible-heading-toggle").on("click", function (e) {
    if ($(this).closest(".ui-collapsible").hasClass("ui-collapsible-collapsed")) {
        e.stopImmediatePropagation();
        $.mobile.loading("show", {
            text: "Loading...Please wait",
            textVisible: true
        });
        setTimeout(function () {
            $("#lv").empty().append(items).listview("refresh");
            $("#c").trigger("expand");
            $.mobile.loading("hide");
        }, 1000);
    }
});