Bootstrap table-> expand-row.bs.table could expand only one row

Question

I have a bootstrap table that expands another bootstrap-table inside it (master-detail), I would like that every time I click on a row of the first table only its table is opened and the others are collapsed:

This is my code:

    tableAulacodici.on('expand-row.bs.table', function (e, index, row, $detail) {       
            $(this).closest("table")
            .find(".detail-view")
            .not(this)
            .collapse('toggle');
            
            $(".tableDetail").bootstrapTable('destroy');            
            $detail.html('Loading from ajax request...');
            var attivi = row.ATTIVATE;
            var attivabili = row.NMAX_ATTIVABILI;
            var obj = "";
            obj += '<h4 class="titoloTabellaAulacodici"> Codici attivi: &nbsp ' + attivi + ' di ' + attivabili + ' ( ' + attivi + ' codici attivi su ' + attivabili + ' attivabili )</h4>'
                + '<table class="tableDetail tableDetail' + index + '" style="border:1px solid #dddddd;padding:1px"'
                + 'data-state-save="true" '
                + 'data-state-save-id-table="saveid"'
                + 'data-height="500" '
                + 'data-id-field="Codice"'
                + 'data-click-to-select="true" '
                + 'data-show-pagination-switch="false"'
                + 'data-pagination="false"'
                + 'data-page-list="[25, 50, 100, 200, all]"'
                + 'data-search="true" '
                + 'data-row-style="rowStyle"'
                + 'data-detail-view="false"'
                + 'data-detail-formatter="detailFormatter"'
                + 'data-show-refresh="false"'
                + 'data-url="json/data1.json">'
                + '<thead>'
                + '<tr class="headerDetail">'
                + '  <th data-field="codiceHardware" class="header" data-sortable="true" data-halign="center" data-align="center">CODICE HARDWARE</th>'
                + '  <th data-field="codiceHardwareVisibile" class="header macchinaAttiva" data-sortable="true" data-halign="center" data-align="center">CODICE PC</th>'
                + '  <th data-field="versioneAula" class="header" data-sortable="true" data-halign="center" data-align="center">VERSIONE AULA</th>'
                + '  <th data-field="vincolo" class="header" data-sortable="true" data-halign="center" data-align="center">VINCOLO</th>'
                + '  <th data-field="listatiAttivi" class="header listati" data-sortable="true" data-halign="center" data-align="center">LISTATI ATTIVI</th>'
                + '  <th data-field="dataInserimento" class="header" data-sortable="true" data-halign="center" data-align="center">DATA INSERIMENTO</th>'
                + '  <th data-field="dataAggiornamento" class="header" data-sortable="true" data-halign="center" data-align="center">DATA AGGIORNAMENTO</th>'
                + '  <th data-field="delete" class="header deleteDetails" data-sortable="false" data-halign="center" data-align="center"></th>'
                + '</tr>'
                + '</thead>';
    
            $detail.html(obj);
    
            $(".tableDetail" + index).bootstrapTable({[...]})

i try to do this but isn't a good solution:

     $(this).closest("table")
            .find(".detail-view")
            .not(this)
            .collapse('toggle');
            
      $(".tableDetail").bootstrapTable('destroy');