Discussion :

[Eddoul]

Bonjour,

Comment puis-je faire lorsque je montre une partie, une autre se cache ?

Avec ce code, j'arrive à montrer/cacher une partie, mais cacher l'autre ?

Code html :

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
23
24
25
26
27
28
29
30
31
32
33
34
		<center>
		<a href="" onclick="bascule('niveau-plongee'); return false;"><input type="checkbox"></a> : Je désire faire de la plongée<br>
		<div id="niveau-plongee" style="display:none;border:1px solid blue;margin:6px;padding:6px;">
			Mon niveau de plongée : 
			<a href="" onclick="bascule('formation_plongee_n1'); return false;"><input type="radio" name="niveau_plongee"></a> aucun 
			<a href="" onclick="bascule('formation_plongee_n2'); return false;"><input type="radio" name="niveau_plongee"></a> le niveau 1 
			<a href="" onclick="bascule('formation_plongee_n3'); return false;"><input type="radio" name="niveau_plongee"></a> le niveau 2 
			<input type="radio"> le niveau 3 
			<input type="radio"> le niveau 4<br>
 
			<div id="formation_plongee_n1" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Je désire suivre une formation pour avoir : <br>
				<input type="radio"> le niveau 1<br> 
			</div>
 
			<div id="formation_plongee_n2" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Je désire suivre une formation pour avoir : <br>
				<input type="radio" name="niveau_plongee"> le niveau 2<br> 
			</div>
 
			<div id="formation_plongee_n3" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Je désire suivre une formation pour avoir : <br>
				<input type="radio" name="niveau_plongee"> le niveau 3<br> 
			</div>
		</div>
 
		<a href="" onclick="bascule('niveau-apnee'); return false;"><input type="checkbox"></a> : Je désire faire de l'apnée<br>
		<div id="niveau-apnee" style="display:none;border:1px solid blue;margin:6px;padding:6px;">
			Mon niveau de plongée : 
			<input type="radio" name="niveau_apnee"> aucun 
			<input type="radio" name="niveau_apnee"> le niveau 1
			<input type="radio" name="niveau_apnee"> le niveau 2
		</div> 
		</center>

et le script bascule :

Code :

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

1
2
3
4
5
6
7
8
9
    function bascule(elem) {
    	etat=document.getElementById(elem).style.display;
    	if(etat=="none"){
    		document.getElementById(elem).style.display="block";
    	}
    	else{
    		document.getElementById(elem).style.display="none";
    	}
    }

Dans mon exemple, quand le clique sur "je désire faire de la plongée", je montre les niveaux de plongée (là nickel).
Ensuite, quand la personne sélectionne son niveau de plongée, je dois montrer la formation qu'il désire faire.
Si on clique sur aucun, il montre "formation niveau 1" (nickel) mais quand je clique sur "formation niveau 2", je voudrais fermer "formation niveau 1" et inversement.

De plus, le bouton radio n'est pas coché, idem pour la case à cocher ("je désire faire de la plongée").


Merci pour votre aide.

Eddy

[SpaceFrog]

dans ta fonction bascule traite tous les cas de figure ...

[Eddoul]

c'est à dire ?

[SpaceFrog]

ben les autres elements ...
là tu passes un element en param et tu vérifier son état

modifie l'état des autres éléments dans la fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 function bascule(elem) {
    	etat=document.getElementById(elem).style.display;
    	if(etat=="none"){
    		document.getElementById(elem).style.display="block";
                // et les autres ?
    	}
    	else{
    		document.getElementById(elem).style.display="none";
               // et les autres ?
    	}
    }

[Eddoul]

c'est ce que je me doutais un peu.
je vais devoir donc en faire un spécifique.

Merci.

[Beginner.]

Salut,

Voici un fil qui pourrait t'intéresser : Inverser plusieurs DIV...

Sinon il y a certaines choses que je ne comprends pas dans ton code :

- Pourquoi tu utilises des objets input type="checkbox" si on ne peut pas les encocher (à cause je pense qu'ils sont à l'intérieur d'une balise <a>) ?

- Même problème pour les objets input type="radio" ---> on ne peut pas les "décocher" ou les "encocher"... de plus les premiers ( "aucun", "le niveau 1" et "le niveau 2") sont toujours décochés alors que les deux derniers ("le niveau 2" et "le niveau 3") sont toujours "cochés"... Ceci est vraiment étrange quand même... Ça risque de perturber les utilisateurs...

Tu n'ai pas obligé d'utiliser une balise <a> pour détecter les cliques de la souris, en JS tu peux savoir si une "checkbox" est cochée ou non, c'est plutôt cela qu'il faudrait utiliser...

Et si tu n'utilises pas le "décochage" et le "cochage" alors je me demande comment tu vas récupérer les paramètres choisis par l'utilisateur...