JSFiddle - React, Tailwind, and code Playground

by mwil

HTML

<div data-role="collapsible" id="c">
     <h2>Collapsible --- Locked</h2> 
    <ul data-role="listview" id="lv">
        <li>Loading but open ...</li>
    </ul>
</div>

<h3>Explanation</h3>
<p>When the collapsible is clicked first after reload, it behaves like i want it to.</p>
<p>After closing it again, it opens directly despite the handler. After two seconds the content is updated, you can see the dates changing.</p>
<p/>

JavaScript

var stop_n_load = function (event) {
    alert('stop opening! (or at least try to ...)');

    // try to stop the expanding by stopping the event
    event.preventDefault();

    // Do some work that takes time and trigger expand afterwards ...
    setTimeout(function (e) {
        dd = new Date();
        $('#lv').empty();
        $('#lv').append("<li><a href='#'>Item A (" + dd + ")</a></li>");
        $('#lv').append("<li><a href='#'>Item B (" + dd + ")</a></li>");
        $('#lv').listview('refresh');
        $('#c').trigger('expand');
        
        $('#c').one('collapse', reset);
    }, 2000);
};

var reset = function (event) {
    $('#c').one('expand', stop_n_load);
};

$('#c').one('expand', stop_n_load);