Comment faire pour montrer une partie HTML et cacher une autre

Version imprimable

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:

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:

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

21/04/2016, 09h25
SpaceFrog

dans ta fonction bascule traite tous les cas de figure ...
21/04/2016, 11h07
Eddoul

c'est à dire ?

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:

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

22/04/2016, 09h29
Eddoul

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

Merci.
22/04/2016, 18h02
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...
23/04/2016, 07h36
Eddoul

tout mon pb est là.
je ne comprends pas pourquoi ce n'es pas coché.

Bon voilà ce que j'ai fait :

Dans le javascript

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
function bascule(elem) {
    	etat=document.getElementById(elem).style.display;
 
    	if(etat=="none"){
    		document.getElementById(elem).style.display="block";
    		document.getElementById('button-checkbox-'+elem).checked=true;
    	}
    	else{
    		document.getElementById(elem).style.display="none";
    		document.getElementById('button-checkbox-'+elem).checked=false;
    	}
}
 
 
function bascule_insc(elem) {
    	if (elem == "aucun") {
    		document.getElementById('blk_N2').style.display="none";
	    	document.getElementById('blk_N3').style.display="none";
	    	document.getElementById('blk_N4').style.display="none";
    		document.getElementById('button-radio-aucun').checked=true;
    	}
    	if (elem == "N1") {
	    	document.getElementById('blk_N2').style.display="none";
	    	document.getElementById('blk_N3').style.display="none";
	    	document.getElementById('blk_N4').style.display="none";
    		document.getElementById('button-radio-N1').checked=true;
    	}
    	if (elem == "N2") {
	    	document.getElementById('blk_N2').style.display="block";
	    	document.getElementById('blk_N3').style.display="none";
	    	document.getElementById('blk_N4').style.display="none";
    		document.getElementById('button-radio-N2').checked=true;
    	}
    	if (elem == "N3") {
	    	document.getElementById('blk_N2').style.display="none";
	    	document.getElementById('blk_N3').style.display="block";
	    	document.getElementById('blk_N4').style.display="none";
    		document.getElementById('button-radio-N3').checked=true;
    	}
    	if (elem == "N4") {
	    	document.getElementById('blk_N2').style.display="none";
	    	document.getElementById('blk_N3').style.display="none";
	    	document.getElementById('blk_N4').style.display="block";
    		document.getElementById('button-radio-N4').checked=true;
    	}
    }

Dans la page :

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
		<input type="checkbox" onclick="bascule('niveau-plongee'); return false;"> : Je désire faire de la plongée<br>
		<div id="niveau-plongee" style="display:none;width:650px; overflow:auto; border:solid 1px black;margin:6px;padding:6px;">
			Mon niveau de plongée : 
			<input type="radio" name="niveau_plongee" id="aucun" onclick="bascule_insc('aucun'); return false;"></a> aucun  
			<input type="radio" name="niveau_plongee" id="N1" onclick="bascule_insc('N1'); return false;"></a> le niveau 1 
			<input type="radio" name="niveau_plongee" id="N2" onclick="bascule_insc('N2'); return false;"></a> le niveau 2 
			<input type="radio" name="niveau_plongee" id="N3" onclick="bascule_insc('N3'); return false;"> le niveau 3 
			<input type="radio" name="niveau_plongee" id="N4" onclick="bascule_insc('N4'); return false;"> le niveau 4<br>
 
			<!--          Niveau 2       -->
			<div id="blk_N2" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				J'ai mon niveau d'encadrement  : <input type="radio" name="encadrant_plongee"> E1
				<br>
				J'ai le niveau de Nitrox : 	<input type="radio" name="Nx" value ="<?php echo $NxE;?>"> Elémentaire 
			</div>
 
			<!--          Niveau 3       -->
			<div id="blk_N3" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				J'ai mon niveau d'encadrement  : <input type="radio" name="encadrant_plongee"> E1
				<br>
				J'ai le niveau de Nitrox : 	<input type="radio" name="Nx" value ="<?php echo $NxE;?>"> Elémentaire 
											<input type="radio" name="Nx" value ="<?php echo $NxC;?>"> Confirmé
			</div>
 
			<!--          Niveau 4       -->
			<div id="blk_N4" style="display:none;border:1px solid green;margin:6px;padding:6px;">
				J'ai mon niveau d'encadrement  : <input type="radio" name="encadrant_plongee"> E2 
												 <input type="radio" name="encadrant_plongee"> E3 
				<br>
				J'ai le niveau de Nitrox : 	<input type="radio" name="Nx" value ="<?php echo $NxE;?>"> Elémentaire 
											<input type="radio" name="Nx" value ="<?php echo $NxC;?>"> Confirmé
				<br>
				J'ai le niveau de Trimix : 	<input type="radio" name="Tx" value ="<?php echo $TxN;?>"> Normoxique 
											<input type="radio" name="Tx" value ="<?php echo $TxH;?>"> Hypoxique
			</div>
		</div>

ça marche pas trop mal.
mais là où ça merde, c'est pour la case à cocher (Je désire faire de la plongée)

Vous pouvez tester là : http://www.scf.asso.fr/index.php?pag...ie_inscription

Bonjour,
il y a tellement de chose à dire que je ne sais par quoi commencer, même si Beginner. t'en a déjà pas mal dit :calim2:

Concernant le HTML :

Code:

                     

ou encore
Code:

1 2 3 <center>  </center>
ne devrait plus trouver leur place dans du code HTML

• Lorsqu'il y a le choix entre plusieurs options on utilise <input type="checkbox"....
• Lorsque le choix est cette option OU cette autre option on utilise <input type="radio"..., en mettant le même name pour que le cochage/décochage soit fait de façon automatique, il ne faut pour autant en oublier une option neutre au cas où.

Dans tous les cas il ne faut oublier de mettre une value.

Concernant le CSS :
Il est préférable de passer par une feuille de style ou encore de mettre tout cela entre les balises <style></style> de la page et faire tout son possible pour ne pas surcharger le code HTML, il en va de la lisibilité, de la maintenabilité de ton code.

Concernant le javascript :
Il te faut entrevoir que la moindre erreur met en vrac la suite de ton code, il est donc préférable de tester tes différents morceaux de code indépendamment les uns des autres.

Concernant tes affichages/masquages d'éléments, cela peut se faire de façon plus « simple » en utilisant les names ou encore en passant par une classe commune pour les éléments liés entre eux et surtout de ne pas se gêner d'utiliser les dataset, forme data-target="id_liee", par exemple
Code:

1 2 3 4 5 <input type="radio" data-target="plongee_n0" name="niveau_plongee">aucun <input type="radio" data-target="plongee_n1" name="niveau_plongee">le niveau 1 <input type="radio" data-target="plongee_n2" name="niveau_plongee">le niveau 2 <input type="radio" data-target="plongee_n3" name="niveau_plongee">le niveau 3 <input type="radio" data-target="plongee_n4" name="niveau_plongee">le niveau 4
dans ce bout de code data-target indique l'id de l'élément devant être affiché si le radio est coché, ne pas mettre de return false dans ce cas l'action par défaut ne serait pas réalisée, ce que l'on peut voir dans ton code un peu partout.

Ensuite c'est un jeu d'enfant, ou presque, que de faire une fonction générique traitant de ce qu'il y a à faire pour afficher/masquer les différents éléments liés.

En gros cela pourrait donner cela :
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 // une fois le document constitué document.addEventListener("DOMContentLoaded", function() { // récup. des éléments <radio> var oRadios = document.querySelectorAll('[type=radio]'); var i, nb = oRadios.length; for (i = 0; i < nb; i += 1) { // affectation action sur le click oRadios[i].onclick = function (e) { // récup. du name var name = this.name; // si il a un name if (name) { // recherche les radios du même nom var memeName = document.querySelectorAll('[name=' + name + ']'); var j, nbj = memeName.length; // parcours <radio> du même name for (j = 0; j < nbj; j += 1) { // récup. id cible var target = memeName[j].dataset.target; // récup. état <radio> var isChecked = memeName[j].checked; // si cible trouvée if (target) { var oElem = document.getElementById(target); // si élément existe if (oElem) { oElem.style.display = isChecked ? 'block' : 'none'; } } } } }; } });
voilà déjà pour un début...

23/04/2016, 16h52
Eddoul

eh bien, je vois que j'ai encore beaucoup à apprendre.

merci d'avoir pris le temps, je vais regarder de plus près.
24/04/2016, 07h51
NoSmoking

Citation:

eh bien, je vois que j'ai encore beaucoup à apprendre.

Rassure toi, nous en apprenons tous tous les jours ;)
24/04/2016, 17h11
Beginner.

Citation:

Envoyé par Eddoul

eh bien, je vois que j'ai encore beaucoup à apprendre.

Comme moi et d'autres...

Justement à ce propos au cas où cela t’intéresserait de te former sous tutora il y a ceci : Mise en place d'une série d'exercices pour apprendre le JavaScript et Node.js.

C'est en construction mais il y a déjà plusieurs exercices dans la sous-section Exercices ... Tu peux poster tes réponses pour te faire corriger...

PS : Tiens nous au courant pour ta page... J'ai cliqué sur le lien et la page semble bloquée (le clique droit sur la souris n'affiche plus le menu du navigateur), il y a apparemment une boucle quelque part qui tourne sans arrêt...