jQuery acordeón - onCollapse y eventos onExpand

Question

tengo un acordeón con un solo título como este

<div class="accordion" id="accordion_acquired_services"> 
    <h3><a href="#">Acquired services</a></h3> 
    <table id="tbl_acquired_services"> 
     <tbody></tbody> 
    </table> 
</div> 

Lo que me gustaría es para unirse a un evento en el acordeón y acordeón abierto cerca ...

realidad lo que me gustaría lograr es hacer una petición AJAX que poblar el contenido del acordeón cada vez que se expandió ...

curiosamente no hay onExpand/onCollapse eventos

hasta ahora tengo este

$("#accordion_acquired_services").bind("accordionchange", function(event, ui) { 
    $('#tbl_acquired_services').html(''); 
    //trigger ajax 
}); 

Pero que desencadena en ambas ocasiones, cuando se derrumbó y cuando se amplía ... ¿cómo sé cuál es cuál?

Answer 1

Pruebe esta solución:

var opened = $(this).find('.ui-state-active').length; 

Answer 2

Usted puede utilizar el evento change y la opción active. De esta manera:

$('#accordion').bind('accordionchange', 
    function() { 
     alert('Active tab index: ' + $(this).accordion('option', 'active')) 
    }); 

Answer 3

cambio de horario y también lo es jQuery. Copiar/pegar desde thread

$("#accordion").accordion({ activate: function(event, ui) { 
      alert(ui.newHeader.text()); 
    } 
}); 

otro evento:

$("#accordion").accordion({ beforeActivate: function(event, ui) { 
     alert(ui.newHeader.text());   
    } 
    }); 

take a look at jQuerys docs para más detalles

Answer 4

Hay 2 códigos aquí para notar

1.Show 2.Shown 3 . Ocultar 4.Hidden

Así que el código sale como está por debajo de

$('#accordion').on('show.bs.collapse', function() { 
//on clicking the accordion menu 
}); 

$('#accordion').on('hide.bs.collapse', function() { 
//on clicking the accordion menu 
}); 

Así que ahora si utilizamos Ocultos y demostrado que podemos desencadenar después de que el contenido del menú acordeón se cierra o se abre por completo

$('#accordion').on('shown.bs.collapse', function() { 
//after menu opens 
}); 

$('#accordion').on('hidden.bs.collapse', function() { 
//after menu closes 
}); 

Answer 5

Según this SO post, jQuery doesn' t exponer los cambios de la misma manera que arriba. Este es un script que escribí y que funciona con la biblioteca jQuery más reciente que tomará el ID del acordeón al abrirlo y actualizará el URL con ese hash.

$(accordionSelText).accordion({ 
     activate: function(event, ui) { 

      var accordionId=ui.newHeader.closest('.accordion').attr('id'); // Grabs the id of the accordion 

      try { 
        if (accordionId) { 
         window.location.hash = accordionId; 
         console.log('Active accordion index: ' + accordionId); 
        } 
      }catch(e){} 
     } 
    });