How to know when Collapsible expands or closes?

Question

I have a Collapsible, and when it is expanded I want to add elements to it, and when it is collected I want to exclude the elements.
At the moment I’m using it as follows:

<div id="expansorTurma" data-role="collapsible">
    <h4 id="expansorTurmaTitle" onclick="montarCursos()">Não sei o código da minha turma.</h4>
    <h6>Escolha seu curso.</h6>

    <div id="cursos"></div>
</div>

<script>
    function montarCursos() {
         /** **/
        $("#cursos").append(<button class="ui-btn ui-corner-all">Elemento</button>')
        /** **/
    }
</script>

But in this case I find a big problem, because every time the button is clicked a new element is created, but I need it to be created only once, and then deleted.

Answer 1

According to the description of the api https://api.jquerymobile.com/collapsible/#Event-Collapse

You can "listen" to these events:

$( "#expansorTurma" )
   .on( "collapsiblecollapse", function( event, ui ) {
         $("#cursos").html("");
    } )
   .on( "collapsibleexpand", function( event, ui ) {
         $("#cursos").append('<button class="ui-btn ui-corner-all">Elemento</button>');
    } );