jQuery accordion - OnCollapse et OnExpand événements

J'ai un accordéon avec un titre comme ça

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

Ce que j'aimerais c'est de lier un événement à l'accordéon ouvert et à l'accordéon, à proximité...

En fait ce que je voudrais atteindre est de faire une requête ajax qui permettraient d'alimenter l'accordéon de contenu à chaque fois qu'il est élargi...

curieusement il n'y a pas de onExpand/onCollapse événements

pour l'instant j'ai ce

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

Mais qui déclenche à deux reprises, quand il s'est effondré et, lorsqu'il est étendu... comment puis-je savoir qui est qui?

  • ok, trouvé. Je viens de vérifier si l'accordéon a l'état actif de la classe..comme ceci: var ouvert = $(this).find('.ui-state-actif").longueur;
  • Utiliser l'événement changestart. Voir jqueryui.com/demos/accordion/#event-changestart
  • Merci de lire ma question encore une fois. le problème n'est pas lorsque l'événement est déclenché, mais comment obtenir la valeur si il est ouvert (élargi) ou fermé (effondré). Et j'ai pensé à elle déjà 😉
  • Oui, je sais, mais je ferais de l'appel ajax avant de l'accordéon s'ouvre de sorte que le contenu est-il quand il est ouvert. C'est plus d'une cosmétique de pointe. Selon la documentation, vous pouvez accéder à l'ancien et du nouveau contenu.
InformationsquelleAutor DS_web_developer | 2012-02-15
  1. 12

    Les changements de temps et est donc jquery. Copier/coller à partir de fil

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

    un autre événement:

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

    jetez un oeil à jQuerys docs pour plus de détails

    InformationsquelleAutor Toydor
  2. 4

    Il y a 2 codes ici pour avis

    1.Montrer
    2.Illustré
    3.Masquer
    4.Caché

    De sorte que le code va comme ci-dessous

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

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

    Alors maintenant, si nous utilisons le Caché et le Montré que nous pouvons déclencher après l'accordéon le contenu de menu pour fermer ou ouvrir complètement

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

$('#accordion').on('hidden.bs.collapse', function () {
 //after menu closes
});
    • recherche pour un long moment. merci..:)
    InformationsquelleAutor Shivachandra
  3. 3

    Vous pouvez utiliser le change événement et le active option. Comme ceci:

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

    D'essayer cette solution:

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

    Je sais que c'est un vieux thread mais cela m'a vraiment aidé

    $( "#Accordion" ).accordion({
collapsible: true,
heightStyle: "content",
activate: function(event, ui) {

  if(ui.newHeader[0]){

    if( ui.newHeader[0].id =='ID of h3'){
        //run code here
      }
    }

  }

 }
});

    Faire ce test si il y a un nouvel en-tête de l'objet qui n'est pas généré lorsque vous fermez un accordéon uniquement lorsque vous ouvrez une.

    InformationsquelleAutor Francois Lemieux
  6. 0

    Selon cette SORTE de post, jQuery ne pas exposer les modifications de la même manière que ci-dessus. C'est un script que j'ai écrit qui fonctionne avec la plus récente de la bibliothèque jQuery qui retiendront l'accordéon ID sur ouvrir et mettre à jour l'URL avec que de hachage.

    $(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){}
        }
    });
    InformationsquelleAutor Aaron Belchamber