JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="collapsible" id="c">
  <h2>Collapse</h2> 
  <ul data-role="listview">
    <li>You don't see me!</li>
  </ul>
</div>

<a href="#" data-role="button"  
  onClick="$('#c').off('expand', stop)">
  Unlock the collapsible
</a>

<a href="#" data-role="button"  
  onClick="$('#c').on('expand', stop)">
  Lock the collapsible
</a>

JavaScript

var stop = function(event) {
    
    $(this).find('.ui-listview').empty()
    event.preventDefault();
    
    /* do ajax and then refresh component with expand enabled */
}

$('#c').on('expand', stop)