Discussion :

[Boris56]

Bonjour,

J'aurai une question à propos du .slideToggle.

Au 1er clic je charge les lignes suivantes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');							
			});
		});
	}
}

[danielhagnoul]

Bonsoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[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.

[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/

[Boris56]

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

Merci pour l'aide.