Nouvelle bizarreté dans accordeon jQuery

Bonjour,

je cherche à détecter l’événement d'ouverture d'un panneau d'accordéon jquery (l’événement change ne convient pas car il agit à la fermeture autant qu'à l'ouverture)

j'ai écrit ce code

$( "h3.ui-accordion-header.ui-state-default" ).click(
   function(event) { 
   
   console.log(this);
   
});

.ui-state-default est l'état du panneau fermé et .ui-state-active est l'état du panneau ouvert.

Curieusement le click est détecté autant sur l'ouverture que sur la fermeture...

quand je clique sur le panneau fermé j'obtiens:

<h3 class="neuf ui-accordion-header ui-helper-reset ui-state-hover ui-state-focus ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">

et quand je clique sur le panneau ouvert j'obtiens:

<h3 class="neuf ui-accordion-header ui-helper-reset ui-state-hover ui-state-focus ui-state-default ui-corner-all" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">

alors que je m'attendais au contraire.....

c'est pas un peu bizarre..?
Modifié par lionel_css3 (21 Feb 2012 - 21:31)

j'ai trouvé une solution en faisant ceci (j'ai rajouté la déclaration de l'accordéon pour plus de clarté)

$("#lg-accordion-1").accordion({
	active : false,
	collapsible : true
	});
	
$("#lg-accordion-1").delegate( 'h3.ui-accordion-header.ui-state-active', 'click',   function() { 
   
   console.log(this);
   
});

ça fonctionne; l'affichage du log se fait uniquement à l'ouverture du panneau mais c'est bizarre car il affiche ui-state-active comme si il tenait compte de l'état après le click et non pas au moment du click...

quelqu'un peut il expliquer cela???

Je rebondis sur mon post, est ce que quelqu'un sait si on peut détecter les deux états suivants d'un accordion jQuery:

- tous les panneaux sont fermés

- 1 panneau est ouvert

je voudrais afficher un image (pour meubler) en dessous d'un accordion fermé, et dès qu'on ouvre un panneau, l'image passe en display:none et disparait et la hauteur du panneau qui s'ouvre prend sa place dans la hauteur, ceci pour ne pas casser ma mise en page...

merci

j'ai trouvé une solution un peu tordue mais elle marche, avec ce code d'initialisation de mon accordion.

	$("#lg-accordion-1").accordion({
		active : false,
		autoHeight : false,
		collapsible : true,
		change : function(evt, ui)  {
		  $("div#deco-3d").hide();
		  index_newContent = ui.newContent.find("p.id-hidden").text();
		  console.log(index_newContent);
			  if (index_newContent == "")  {
				  $("div#deco-3d").show();
			  }
		  }
	});

je me suis rendu compte que si on fermait un panneau ouvert (grace à collapsible : true dans les paramètres, il renvoyait une chaine vide pour index_newContent (élément de ui.newContent), cette variable me sert ailleurs.

le div#deco-3d est caché si un panneau est ouvert, il est visible si aucun panneau n'est ouvert, c'est ce que je voulais mais je ne comprend pas pourquoi ça fonctionne...