Discussion :

[calagan99]

Bonjour à tous,

je suis en train de batir un petit site vitrine qui sera basé sur une page avec 4 onglets.
Chaque onglet est en fait une div activée en fonction du clic sur un item de menu.
l'item de menu a toujours pour id quelque chose du genre "xx-button".
chaque div correspondant à un onglet à pour id quelque chose du genre "xx".
Ce qui me permet, en fonction du bouton cliqué, de savoir quelle div afficher.

Ci-dessous, le code avec lequel je gère l'affichage de mes div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$("#content .button").click(function(){
 
	$clicked = $(this);
 
	var idToLoad = $clicked.attr("id").split('-');
 
	$("#panels").find("div:visible").fadeOut("fast", function(){
		$(this).parent().find("#"+idToLoad[0]).fadeIn();
	})
 
});

Ce code fonctionne à un "détail" prés : les div contenues dans la div affichée (via "$(this).parent().find("#"+idToLoad[0]).fadeIn();") restent invisibles.

Comment puis-je modifier mon script de sorte que l'affichage de la div sélectionnée affiche également ses contrôles enfants.

D'avance merci pour votre aide

[vrd-74]

Les div enfant sont initialisées en display:none dans le css ? Si oui, pourquoi ne pas les laisser visibles et juste initialiser la div parente en display:none ? Le résultat serait le même.

[calagan99]

vrd-74, merci pour ta réponse.
Non, les div enfants ne sont pas initialisées avec display:none;

C'est le fadeOut que s'en charge.

[vrd-74]

Il faudrait alors que le fadeOut ne s'appliquent qu'aux div principales, celles associées au bouton. Une classe sur celles-ci avec un fadeOut appliqué dessus ne passera que les div principales en display none, et laissera les div enfants en visible.

[calagan99]

C'est ce que je me suis dit. Du coup, j'ai modifié mes div (correspondant à mes onglets) en leur joutant une class "onglet".
Par contre, j'ai beau essayer, j'ai du mal à trouver le moyen de "filtrer" les div à masquer dans le fadeOut.

Aurais-tu une piste pour m'aiguiller ?

Edit : Sinon, comment procéder pour faire un truc dans ce style :

Code :

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

$("#panels").find("div:visible").not("#"+idToLoad).fadeOut("fast")

[vrd-74]

Personnellement j'aurai fait ça, sachant que tu peux très bien cacher toutes les div puisque le fadeIn ne se fait qu'après (à moins que tu veux faire un fondu enchainé, mais ça me paraitrait bizarre avec des onglets) :

Code :

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

1
2
3
$('#panels .onglet').fadeOut('slow', function() {
	$('#'+idToLoad).fadeIn();
});