Afficher / masquer des blocs

Version imprimable

Bonjour,

J'aurais besoin d'aide car je mer douille pour afficher / masquer des blocs.

J'ai ceci

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
		<!-- ****************************************************************************************
								N I V E A U X      P L O N G E E 
			 ****************************************************************************************
		-->
		Mon niveau de plongée : 
		<!-- <input type="radio" name="niveau_plongee" id="N0" onclick="bascule_niv_plongee('N0'); return false;" value="N0" checked> aucun  
		<input type="radio" name="niveau_plongee" id="N1" onclick="bascule_niv_plongee('N1'); return false;" value="N1"> le niveau 1  -->
		<input type="radio" name="niveau_plongee" id="N0" value="N0" checked> aucun  
		<input type="radio" name="niveau_plongee" id="N1" value="N1"> le niveau 1 
		<input type="radio" name="niveau_plongee" id="N2" onclick="bascule_niv_plongee('N2'); return false;" value="N2"> le niveau 2 
		<input type="radio" name="niveau_plongee" id="N3" onclick="bascule_niv_plongee('N3'); return false;" value="N3"> le niveau 3 
		<input type="radio" name="niveau_plongee" id="N4" onclick="bascule_niv_plongee('N4'); return false;" value="N4"> le niveau 4<br>
 
		<!--  **************************   Niveau 2 ***************************************** -->
		<div id="blk_N2" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value="" checked> aucun
				<input type="radio" name="encadrant_plongee" value="E1"> E1
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value="" checked> aucun
				<input type="radio" name="Nx" value ="NxE"> Elémentaire 
 
			<!--    Niveaux Archéologie   -->
			<br>
				Mon niveau en archéologie : 
				<input type="radio" name="niveau_archeo" id="PA0" value="" id="arche_aucun" checked> aucun 
				<input type="radio" name="niveau_archeo" id="PA1" value="PA1"> PA1
				<input type="radio" name="niveau_archeo" onclick="bascule_inscription('encadrant_archeo'); return false;" value="PA2"> PA2
				<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
					Mon niveau d'encadrement  : 
						<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value="" checked> aucun 
						<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
						<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
						<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
				</div>
		</div>
 
		<!--  **************************   Niveau 3 ***************************************** -->
		<div id="blk_N3" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value="" checked> aucun
				<input type="radio" name="encadrant_plongee" value="E1"> E1
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value=""  checked> aucun
				<input type="radio" name="Nx" value ="NxE"> Elémentaire 
				<input type="radio" name="Nx" value ="NxC"> Confirmé
 
			<!--    Niveaux Archéologie   -->
			<br>
			Mon niveau en archéologie : 
			<input type="radio" name="niveau_archeo" id="PA0" value="PA0" onclick="bascule_niv_plongee('PA0'); return false;" checked> aucun 
			<input type="radio" name="niveau_archeo" id="PA1" value="PA1" onclick="bascule_niv_plongee('PA1'); return false;" > PA1
			<input type="radio" name="niveau_archeo" id="PA2" value="PA2" onclick="bascule_niv_plongee('PA2'); return false;" > PA2
			<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Mon niveau d'encadrement  : 
					<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value=""  checked> aucun 
					<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
					<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
					<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
			</div>
		</div>
 
		<!--  **************************   Niveau 4 ***************************************** -->
		<div id="blk_N4" style="display:none;width:450px;overflow:auto; border:1px solid black;margin:6px;padding:6px;">
			Mon niveau d'encadrement  : 
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_aucun" value=""  checked> aucun
				<input type="radio" name="encadrant_plongee" id="encadrant_plongee_E2" value="E2" > E2
				<input type="radio" name="encadrant_plongee" value="E3"> E3
				<input type="radio" name="encadrant_plongee" value="E4"> E4
			<br>
			Mon niveau de Nitrox : 
				<input type="radio" name="Nx" id="Nitrox_aucun" value=""  checked> aucun
				<input type="radio" name="Nx" value ="NxE" > Elémentaire 
				<input type="radio" name="Nx" value ="NxC"> Confirmé 
			<br>
			J'ai le niveau de Trimix : 	<input type="radio" name="Tx" value =""  checked> aucun
										<input type="radio" name="Tx" value ="TxN"> Normoxique 
										<input type="radio" name="Tx" value ="TxH"> Hypoxique
			<!-- **************************   Niveaux Archéologie  ***************************************** -->
			<br>
			Mon niveau en archéologie : 
				<input type="radio" name="niveau_archeo" id="PA0" value="PA0" onclick="bascule_niv_plongee('PA0'); return false;" checked> aucun 
				<input type="radio" name="niveau_archeo" id="PA1" value="PA1" onclick="bascule_niv_plongee('PA1'); return false;"> PA1
				<input type="radio" name="niveau_archeo" id="PA2" value="PA2" onclick="bascule_niv_plongee('PA2'); return false;"> PA2
				<input type="radio" name="niveau_archeo" id="PA3" value="PA3" onclick="bascule_niv_plongee('PA3'); return false;"> PA3
			<div id="encadrant_archeo" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				Mon niveau d'encadrement  : 
					<input type="radio" name="encadrant_archeo" id ="encadrant_archeo_aucun" value=""  checked> aucun 
					<input type="radio" name="encadrant_archeo" value="FA1"> FA1 
					<input type="radio" name="encadrant_archeo" value="FA2"> FA2 
					<input type="radio" name="encadrant_archeo" value="FA3"> FA3 
			</div>
		</div>

je voudrais quand je clique sur N2 par exemple, que la DIV blk_N2 soit afficher, quand je clique sur N3, que la DIV blé_N3 soit afficher mais masque la div blé_N2 si elle était afficher.
En fait, je dois afficher soit la DIV blk_N2 sur je sélectionne sur N2, soit blk_N3 si je sélectionne N3, soit blk_N4 si je sélectionne N4. Une seule DIV doit être afficher.
Si je sélectionne "aucun" ou "N1", les DIV blk_N2, blk_N3 et blk_N4 doivent être masquer.

Mais je mer douille.

voici la page : http://www.scf.asso.fr/index.php?pag...ie_inscription

Merci pour votre aide.

Eddy

Salut

Attention, chaque ids doit être unique.
Il nous manque la fonction JavaScript bascule_niv_plongee(SrcId), à moins que c'est celle-ci que tu ne sais pas écrire.
Cette fonction (ici dans le head) pourrait ressembler à

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
32
33
34
   <head>
		<script>
			function bascule_niv_plongee(niveau){
				switch(niveau) {
					case'N0':
					case'N1':
					case'N2':
					case'N3':
					case'N4':
						document.getElementById("blk_N2").style.display = 'none';
						document.getElementById("blk_N3").style.display = 'none';
						document.getElementById("blk_N4").style.display = 'none';
						if (niveau !== 'N0' || niveau !== 'N1'){
							let IdDivAffiche = "blk_" + niveau;
							document.getElementById(IdDivAffiche).style.display = 'block';
						}
						break;
 
					case'PA0':
					case'PA1':
					case'PA2':
					case'PA3':
						///document.getElementById("blk_N2").style.display = 'none';
						//document.getElementById("blk_N3").style.display = 'none';
						//document.getElementById("blk_N4").style.display = 'none';
						//if (niveau !== 'N0' || niveau !== 'N1'){
						//	let IdDivAffiche = "blk_" + niveau;
						//	document.getElementById(IdDivAffiche).style.display = 'block';
						//}
						break;
				} // fin du switch
			}
		</script>
   </head>

Pour les ids PA0 à PA3, tu ne dit pas à quoi ils servent....

13/09/2018, 12h59
johnlobs

Bonjour,

@ProgElecT: Attention , la fonction bascule_niv_plongee(niveau) utilise un switch inutile étant donné qu'il n'y a pas de break donc passage par tous les cases.
Il serait préférable d’écrire directement le code du case N4 sans switch pour ne pas créer de confusion dans la compréhension du code.

@Eddoul: Il faut que tu réorganise le code de ta page car je vois de la duplication de code inutile pour les niveau archéologie alors qu'une div te suffit que tu affiche et deplace tes div.

Bon courage.
13/09/2018, 15h11
ProgElecT

Salut

@johnlobs

Citation:

switch inutile étant donné qu'il n'y a pas de break

c'est bien là l'utilité, pour les conditions N0 à N4 l'effacement des divs blk_N2 à blk_N4 sera fait (lignes 10 à 12), puis affichage de l'une des divs (ligne 15) correspondant à l'id passé en paramètre à la fonction, à la condition que l'id ne soit pas égal à N0 ou N1, puis quitte le switch ligne 17.
Si il veut utiliser la même fonction pour traiter les ids PA0 à PA3, le code continu à la ligne 19, suite du switch.

On peut le faire avec des conditions If, mais là il me semble que s'est plus lisible avec switch ... case

Salut
@ProgElecT

C'est en effet ce que je dis : le code est fonctionnel mais le switch ne sert a rien étant donné que le if est repris dans le cas N4 sur les N0 et N1 .

Code:

1
2
3
4
5
6
7
8
 case'N4':
                                                document.getElementById("blk_N2").style.display = 'none';
                                                document.getElementById("blk_N3").style.display = 'none';
                                                document.getElementById("blk_N4").style.display = 'none';
                                                if (niveau !== 'N0' || niveau !== 'N1'){
                                                        let IdDivAffiche = "blk_" + niveau;
                                                        document.getElementById(IdDivAffiche).style.display = 'block';
                                                }

On voit bien a la ligne 5 que le if dont tu parles est utilisé donc switch inutile.
Ceci reviendrait à écrire:

Code:

1
2
3
4
5
6
7
8
9
10
<script>
                                 function bascule_niv_plongee(niveau){
                                                document.getElementById("blk_N2").style.display = 'none';
                                                document.getElementById("blk_N3").style.display = 'none';
                                                document.getElementById("blk_N4").style.display = 'none';
                                                if (niveau !== 'N0' || niveau !== 'N1'){
                                                        let IdDivAffiche = "blk_" + niveau;
                                                        document.getElementById(IdDivAffiche).style.display = 'block';
                                                             }
</script>

je n'ai peut etre pas pris le temps de bien lire mais je pense que c'est bon comme cela et c'est très lisible.
Ce n'est qu'une optimisation de code ni plus ni moins.

Cordialement,

13/09/2018, 15h45
ProgElecT

Re

:ccool:, je suis d'accord, mais ..... les cas PA0 à PA3 ne pourront pas être traités dans cette même fonction (se qui ne serait pas plus mal à mon avis ;))
13/09/2018, 18h01
johnlobs

Bonjour,

Nous avons proposé à @Eddoul une première version très simplifiée de la chose afin qu'il puisse s'en inspirer pour poursuivre son travail.
Les cas PA0 etc ne sont pas traités (ou commentés dans ton exemple).

Je pense qu'il a assez de matière pour pouvoir finaliser sont travail....

Merci à toi @ProgElecT pour ton aide

Bon courage @Eddoul
:)

Bonjour,

Il suffit d'ajouter des classes et quelques bricoles pour simplifier le tout :

on met des attributs data-blk sur les <input radio>, pour identifier quel bloc ouvrir (data-blk="blk_N2", ... : chaque data-blk correspond à l'id du bloc à ouvrir)
on met une classe "blk_plongee" sur chaque bloc à afficher/masquer (je ne m'occupe ici QUE des 3 blocs "niveau de plongée")
on en profite pour ajouter les <label> (ça permet de cliquer sur le texte pour cocher/décocher) !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- NIVEAU DE PLONGEE -->
<p>
  Mon niveau de plongée :
  <label><input type="radio" name="niveau_plongee" id="N0" value="N0" checked> aucun</label>
  <label><input type="radio" name="niveau_plongee" id="N1" value="N1"> le niveau 1</label>
  <label><input type="radio" name="niveau_plongee" id="N2" value="N2" data-blk="blk_N2"> le niveau 2</label>
  <label><input type="radio" name="niveau_plongee" id="N3" value="N3" data-blk="blk_N3"> le niveau 3</label>
  <label><input type="radio" name="niveau_plongee" id="N4" value="N4" data-blk="blk_N4"> le niveau 4</label>
</p>
<!-- niveau 2 -->
<div class="blk_plongee" id="blk_N2">
   ...
</div>
<!-- niveau 3 -->
<div class="blk_plongee" id="blk_N3">
   ...
</div>
<!-- niveau 4 -->
<div class="blk_plongee" id="blk_N4">
   ...
</div>

N.B.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// NIVEAU DE PLONGEE
var niveaux_plongee = document.querySelectorAll("input[name=niveau_plongee]");
var blocks_plongee = document.querySelectorAll(".blk_plongee");
 
niveaux_plongee.forEach(function(niveau_plongee) {
  niveau_plongee.addEventListener("click", function() {
    var blk_id = niveau_plongee.dataset.blk; // contenu de data-blk
 
    blocks_plongee.forEach(function(blk_plongee) {
      if ( blk_id && blk_plongee.id == blk_id ) {
        blk_plongee.style.display = "block"; // on affiche le bon bloc
      } else {
        blk_plongee.style.display = "none"; // on masque les autres blocs
      }
    });
  });
});

ET C'EST TOUT !

ATTENTION : pour les autres (encadrant_archeo)... comme il a été dit, un id doit être UNIQUE !!
Il faudrait donc remettre de l'ordre dans le code HTML avant de continuer.

17/09/2018, 18h41
johnlobs

Bonjour,

@jreaux62, merci pour ta reponse.

Bon courage