SlideToggle (Fermeture auto)

Version imprimable

Bonjour à tous,

Je possede plusieurs interviews, possedant chacune un titre. Lors du clic sur l'un de ces titres la video apparait en dessous en slideToggle. Cela fonctionne très bien, cependant je voudrais que deux videos ne soient pas visibles en meme temps. Donc si on clique sur le titre d'une autre interview, celle ouverte précedemment se ferme pour ensuite ouvrir la seconde. Donc slideUp avant slideToggle...

J'ai déjà essayé plusieurs choses mais rien ne fonctionne :/ Voici mon code et la page avec le script en action :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#interviews a.interview-title').click(function() { var $nextDiv = $(this).next('.interview-content'); var $visibleSiblings = $nextDiv.siblings('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('500', function() { $nextDiv.slideToggle('500'); }); } else { $nextDiv.slideToggle('500'); } });
Code:

1 2 3 4 5 6 <ul id="interviews"> <li><a class="interview-title">Votre vision du monde des affaires et de l’économie a-t-elle changé avec le temps ? Et si oui, comment ?</a> <div class="interview-content"><iframe src="http://www.youtube.com/embed/0zFjO5nnGlE?rel=0&showinfo=0&vq=hd720&wmode=transparent" height="320" width="570" allowfullscreen="" frameborder="0"></iframe></div></li> <li><a class="interview-title">Comment doivent s’organiser les qualités d’un manager qui doit organiser la vie de plusieurs sociétés aujourd’hui ?</a> <div class="interview-content"><iframe src="http://www.youtube.com/embed/Q0i61jZr_tU?rel=0&showinfo=0&vq=hd720&wmode=transparent" height="320" width="570" allowfullscreen="" frameborder="0"></iframe></div></li> </ul>
Lien vers la page

Un grand merci !

Le pb de ton code vient que tu cherches les noeuds frères (siblings) de ton div. Il n'y a qu'un div dans ton li et donc il ne te renvoie rien. Il faut remonter au parent, récupérer ses frères et chercher les div visibles dans chaque li.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#interviews a.interview-title').click(function() { var $nextDiv = $(this).next('.interview-content'); var $visibleSiblings = $(this).parent().siblings().find('div:visible'); if ($visibleSiblings.length ) { $visibleSiblings.slideUp('500', function() { $nextDiv.slideToggle('500'); }); } else { $nextDiv.slideToggle('500'); } });

01/06/2013, 20h48
vbaguet

Merci beaucoup !

Premièrement ça fonctionne et deuxièmement j'ai compris xD
Un grand merci !

Bonsoir

Une autre solution.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
 * Le nombre de divisions interview est fixe, inutile
 * de le déterminer à chaque clic.
 */
var jObjDivsInterview = $( "#interviews" ).find( "div.interview-content" );
 
$( "a.interview-title", "#interviews" ).on( "click", function(){
	var jObjDiv = $( this ).next();
 
	/*
	 * Uniquement si la division n'est pas déjà visible, évite 
	 * un va-et-vient si l'utilisateur active une seconde 
	 * fois le même lien.
	 * 
	 * Peut importe le nombre de divisions ouvertes, même 
	 * si zéro.
	 * 
	 * 500 millisecondes est un chiffre pas un string.
	 */
	if ( jObjDiv.is( ":hidden") ){
		jObjDivsInterview.slideUp( 500, function(){
			jObjDiv.slideDown( 500 );
		});
	}
 
	/*
	 * Supprime l'action par défaut et la
	 * transmission de l'événement.
	 */
	return false;
});