How to know when Collapsible expands or closes?

1

I have a collapsible , and when it is expanded I want to add elements in it, and when it is collapsed I want to delete the elements.
I am currently using the following form:

<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 encounter 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.

    
asked by anonymous 05.06.2015 / 00:29

1 answer

1

According to the description of the api link

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>');
    } );
    
29.10.2015 / 18:36