Afficher masquer DIV suivante sur clic image JavaScript

**modus57** · 13/07/2017, 17h36

Bonjour

Après le clic sur l'image Nom : kitplus.png
Affichages : 1202
Taille : 615 octets

je souhaiterai afficher l'image Nom : kitmoins.png
Affichages : 1164
Taille : 589 octets

.

J'ai fait des recherche et perdu beaucoup de temps mais j'ai pas trouver de solution.

Voici mon code :

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
23
24
25
26
27
28
29
30
31
<!doctype html>
 
<html>
<head>
	<link href="\CSS\style.css" rel="stylesheet" type="text/css"/>
	<title>Afficher masquer div suivante</title>
	<script type="text/javascript">
		function Hide (addr) { document.getElementById(addr).style.display='none'; }
		function Show (addr) { document.getElementById(addr).style.display ='block'; }
 
		function toggle(anId)
		{
			if (document.getElementById(anId).style.display == "none") { Show(anId); }
			else													   { Hide(anId); }
		}
 
		window.onload = function () { Hide("foo"); };
		window.onload = function () { Hide("foo1"); };
	</script>
</head>
 
<body>
	<h2>Afficher masquer div suivante</h2>
 
	<h6><a href="#" onclick = "toggle('foo');"><img src='/Images/kitplus.png' align="top" hspace="0" vspace="1">Cliquer pour basculer l'état du div suivant 1</a></h6>
	<div id="foo">Ce contenu est visible ou non selon le cas 1 </div>
 
	<h6><a href="#" onclick = "toggle('foo1');"><img src='/Images/kitplus.png' align="top" hspace="0" vspace="1">Cliquer pour basculer l'état du div suivant 2</a></h6>
	<div id="foo1">Ce contenu est visible ou non selon le cas 2 </div>
</body>
</html>

Comment le modifier pour arriver au résultat souhaité ?

Merci d'avance pour votre participation.

**Beginner.** · 13/07/2017, 19h25

Salut,

J'ai ajouté quelques petites choses, tu peux tester ici : http://jsbin.com/kafejodota/edit?html,output ...

PS : J'ai changé ceci :

Code :

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

1
2
window.onload = function () { Hide("foo"); };
window.onload = function () { Hide("foo1"); };

Par ceci : window.onload = function () { Hide("foo"); Hide("foo1");};

**modus57** · 14/07/2017, 00h14

Bonsoir Beginner.

Merci infiniment ça fonctionne nickel chrome et bravo

pour votre réactivité.

**ProgElecT** · 14/07/2017, 09h42

Envoyé par modus57

Bonsoir Beginner.

Merci infiniment ça fonctionne nickel chrome et bravo

pour votre réactivité.

modus57, je ne vois pas de

pour Beginner., attention je vais te

**Beginner.** · 14/07/2017, 16h29

@modus57 : De rien... Vous avez fait le principal...

@ProgElecT : Oui effectivement et éventuellement on pourrait aussi mettre le fil en "résolu" ...

**modus57** · 14/07/2017, 16h50

Bonjour ProgElecT.

Je ne comprends pas votre réaction, qu'est-ce que ça signifie ?

modus57, je ne vois pas de

pour Beginner., attention je vais te

Ceci dit, les corrections apportées par Beginner. fonctionnent bien hormis un petit souci, suivant le nombre de DIV ou la taille de leur contenu s'ils sont sur la page suivante lors du clic sur l'image d'un DIV situé sur cette deuxième page cela renvoi au début de la première page.

Comment y remédier.

**Beginner.** · 14/07/2017, 20h27

Envoyé par modus57

Bonjour ProgElecT.

Je ne comprends pas votre réaction, qu'est-ce que ça signifie ?

C'est juste une petite taquinerie, vous avez mis un pouce vert dans votre poste mais vous n'avez pas cliqué sur le pouce vert qu'on trouve sous chaque poste (en bas à droite). Le fait de cliquer sur ce pouce vert donne un point à l'auteur...

Envoyé par modus57

Ceci dit, les corrections apportées par Beginner. fonctionnent bien hormis un petit souci, suivant le nombre de DIV ou la taille de leur contenu s'ils sont sur la page suivante lors du clic sur l'image d'un DIV situé sur cette deuxième page cela renvoi au début de la première page.

Comment y remédier.

Ah oui effectivement, j'ai testé et c'est pénible d'ailleurs... J'ai réussi à diminuer le problème en mettant le tout dans une div container et en ajoutant un peu de CSS : http://jsbin.com/xopunatoru/1/edit?html,output

Le problème ne disparait pas complètement, parfois (dans certains cas) lorsqu’on clique sur l'image celle-ci se déplace verticalement d'une distance plus ou moins grande...

Mais il y a aussi ce problème dans les éditeurs que j'ai testés (code folding), je crois bien que c'est normal...

J'ai l'impression que c'est possible de l’éviter en jouant sur la taille verticale du container et/ou sur le scroll verticale... Mais on se retrouverait avec un espace vide en bas de page...

--> les faq du site (par exemple : https://javascript.developpez.com/faq/javascript) utilisent cette fonction (plier/déplier)...

Afficher masquer DIV suivante sur clic image JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager