La fonction .slideToggle

Version imprimable

Bonjour,

J'aurai une question à propos du .slideToggle.

Au 1er clic je charge les lignes suivantes :

Code:

1
2
3
4
5
6
7
8
 
$('#list_box .list').first().css('border-left', 'none');
		$('#list_box .list').last().css('border-right', 'none');
		$("a[rel='mybox']").click(function(){
			$('#list_box').css('-moz-border-radius', '3px 3px 0 0');
			$('#mybox').css('border-top', 'solid 1px #ededed');
			$('#list_box').css('border-bottom', 'solid 1px #a9a9a9');
			$('#mybox').css('-moz-border-radius', '0px 0px 3px 3px');

Mais au second clic je voudrais que les lignes que j'ai chargé disparaisses, alors j'ai placé le code suivant, mais forcement sa ne marche pas :

Code:

1
2
3
4
5
 
$("#mybox").slideToggle('slow', function() {
				$('#mybox').css('border-top', 'none');
				$('#list_box').css('border-bottom', 'none');
				$('#list_box').css('-moz-border-radius', '3px');

Quelqu'un aurait-il un idée ?
Merci

Le code entier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
	mybox.init();
});
 
mybox = {
	init : function(){		
		$("#mybox").hide();
		$('#list_box .list').first().css('border-left', 'none');
		$('#list_box .list').last().css('border-right', 'none');
		$("a[rel='mybox']").click(function(){
			$('#list_box').css('-moz-border-radius', '3px 3px 0 0');
			$('#mybox').css('border-top', 'solid 1px #ededed');
			$('#list_box').css('border-bottom', 'solid 1px #a9a9a9');
			$('#mybox').css('-moz-border-radius', '0px 0px 3px 3px');
			$("#mybox").slideToggle('slow', function() {
				$('#mybox').css('border-top', 'none');
				$('#list_box').css('border-bottom', 'none');
				$('#list_box').css('-moz-border-radius', '3px');							
			});
		});
	}
}

Bonsoir.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * Je ne sais pas si j'ai bien compris votre question.
 * S'il s'agit d'ajouter et puis d'enlever des styles CSS,
 * il est préférable de passer par l'ajout ou le retrait
 * d'une classe. Exemple :
 */
$("a[rel='mybox']").click(function(){
	$('#list_box').addClass("listBoxClass");
 
	$('#mybox').addClass("myBoxClass");
 
	$("#mybox").slideToggle('slow', function() {
		$('#list_box').removeClass("listBoxClass");
		$('#mybox').removeClass("myBoxClass");
	});
});

Code:

1
2
3
4
5
6
7
8
.listBoxClass {
	-moz-border-radius: 3px 3px 0px 0px;
	border-bottom: 1px solid #a9a9a9;
}
.myBoxClass {
	-moz-border-radius: 0px 0px 3px 3px;
	border-top: 1px solid #ededed;
}

13/07/2010, 08h35
Boris56

Arf, sa ne marche pas se donne le même effet...

En faite se que je veux, c'est que lorsque je clic, ce style ($('#list_box').addClass("listBoxClass"); $('#mybox').addClass("myBoxClass");) se charge et reste actif a la fin du chargement du .slideToggle, puis quand je clic une seconde il disparaisse.

Hors, la il apparait le temps du chargement du .slideToggle puis disparait avec le .removeClass, comme dans mon script original.
16/07/2010, 00h46
danielhagnoul

Bonsoir

Si vous souhaitez gérer les styles par rapport à l'état du toggle, le mieux serait de remplacer la fonction slideToggle par les fonctions slideDown() et slideUp().

Voir : http://api.jquery.com/
16/07/2010, 08h42
Boris56

Merci, j'ai trouver hier enfaite, il faut utiliser la fonction .toggle couplé avec les fonction .slideIn et .slideOut :)

Merci pour l'aide.