Affichage dynamique

Version imprimable

Affichage dynamique

Jusqu'a maintenant ma page à un menu avec des bouton [+] et des boutons [-]. Lorsqu'on clique sur le [+] l'image change pour un [-] et des liens s'affichent dans la boite du bas. Mon problème c'est que si je pèse deux des boutons la fonction du premier n'est pas désactiver et le contenu afficher reste présent donc le second contenu s'affiche à la suite de l'autre.

J'ai pris le temps de prendre un SS pour faciliter la compréhension de mon problème.
http://img.photobucket.com/albums/v2...ko/imgcopy.png

JS du moment:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
function foldOut(div,img) {
      var dis = document.getElementById(div);
      var image = document.getElementById(img);
 
      if (dis.style.display == 'none') 
		{
         dis.style.display = 'block';
         image.src = 'images/minusFold.png';
        }
	  else 
		{
         dis.style.display = 'none';
         image.src = 'images/plusFold.png';
		}
 
   }

HTML:

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
 
<div id="mainBox">  <!--All content box-->
			<ul class="menu">
					<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show1' , 'l1' );">
								<img src="images/plusFold.png" alt="PLUS" id="l1"/></a>
								Link1
					</li>
 
 
 
					<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show2' , 'l2' );">
								<img src="images/plusFold.png" alt="PLUS" id="l2"/></a>
								Link2
					</li>
 
 
						<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show' , 'l3' );">
								<img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
								Link3
					</li>
 
 
						<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show' , 'l4' );">
								<img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
								Link4
					</li>
			</ul>
					<div class="linkSection">
							<p class="showUp"  id="show1" >
								Allo
							</p>
								<p class="showUp"  id="show2" >
								Allo le monde.
							</p>
 
					</div>
 
 
 
	</div>
 
	</body>

Je ne sais pas comment exprimer ce que je veux faire, SVP de l'aide!

09/04/2009, 00h54
emmanuel.remy

Le problème c'est que quand tu cliques sur un menu, il faut penser à cacher le texte précédemment affiché et remettre la bonne image associée.

ERE
09/04/2009, 01h13
Yakuzan

J'ai resolu mon probleme, mais j'utilise 4 function qui regarde si chaque image et contenu son afficher, sa fait beaucoup de ligne de code haha...

Je demanderais a mon prof si il y a une maniere plus propre.
09/04/2009, 08h33
RomainVALERI

Citation:

Envoyé par Yakuzan

J'ai resolu mon probleme, mais j'utilise 4 function qui regarde si chaque image et contenu son afficher, sa fait beaucoup de ligne de code haha...

Je demanderais a mon prof si il y a une maniere plus propre.

Demande à nous d'abord ;) allez montre les ces fonctions si verbeuses, qu'on voie si ya moyen de les optimiser un peu ;)
09/04/2009, 10h21
emmanuel.remy

Pourtant il suffit d'enregistrer l'élément actif :oops: et d'en changer à chaque nouvelle sélection. Effectivement il doit y avoir de l'optimisation dans l'air ;)

ERE

Attention aux yeux:

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
function foldOut(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis1.style.display == 'none' ) 
		{
 
         paraDis1.style.display = 'block';
         dot1.src = 'images/minusFold.png';
		 paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		 paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
		 paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis1.style.display = 'none';
         dot1.src = 'images/plusFold.png';
 
		}
}
 
function foldOut2(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis2.style.display == 'none' ) 
		{
 
         paraDis2.style.display = 'block';
         dot2.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
		  paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis2.style.display = 'none';
         dot2.src = 'images/plusFold.png';
 
		}
}
 
function foldOut3(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis3.style.display == 'none' ) 
		{
 
         paraDis3.style.display = 'block';
         dot3.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		  paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis3.style.display = 'none';
         dot3.src = 'images/plusFold.png';
 
		}
}
 
function foldOut4(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis4.style.display == 'none' ) 
		{
 
         paraDis4.style.display = 'block';
         dot4.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		  paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis4.style.display = 'none';
         dot4.src = 'images/plusFold.png';
		}
}

foldout1 et 2 et 3 et 4 sont identiques, c'est juste les variables qui sont affecter de maniere differente.

Citation:

Attention aux yeux:

Effectivement 8O

Je te propose ce script qui reste dans ton esprit:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
    <script type="text/javascript">
      var imgPlusMinus=null;  //l'image affichée sous la forme d'un minus
      var bandeau = null; //le bandeau affiché
 
      function foldOut(div,img) {
            //on restitue l'image plus
            if (imgPlusMinus !=null) imgPlusMinus.src = 'images/plusFold.png';
            //on cache le bandeau du bas
            if (bandeau != null) bandeau.style.display="none";
 
            //on stocke le nouveau bandeau...
            bandeau = document.getElementById(div);
            //... et la nouvelle image
            imgPlusMinus = document.getElementById(img);
 
            //et on affiche
            bandeau.style.display = 'block';
            imgPlusMinus.src = 'images/minusFold.png';
 
         }  
    </script>

Avec de code HTML:

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
 
<div id="mainBox">  <!--All content box-->
  <ul class="menu">
   <li>
       <a href="#" onclick="foldOut( 'show1' , 'l1' );">
           <img src="images/plusFold.png" alt="PLUS" id="l1"/></a>
           Link1
   </li>
   <li>
        <a href="#" onclick="foldOut( 'show2' , 'l2' );">
           <img src="images/plusFold.png" alt="PLUS" id="l2"/></a>
            Link2
    </li>
    <li>
         <a href="#" onclick="foldOut( 'show3' , 'l3' );">
	  <img src="images/plusFold.png" alt="PLUS" id="l3"/></a>
          Link3
    </li>
    <li>
          <a href="#" onclick="foldOut( 'show4' , 'l4' );">
          <img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
	   Link4
     </li>
  </ul> 
  <div class="linkSection">
   <p class="showUp"  id="show1" style="display:none">
	    Allo
   </p>
   <p class="showUp"  id="show2" style="display:none">
   	    Allo le monde.
   </p>
   <p class="showUp"  id="show3" style="display:none">
            Allo le World.
   </p>
   <p class="showUp"  id="show4" style="display:none">
   	    Allo le Mondo.
   </p>
  </div>
</div>

Cela fonctionne comme tu le souhaites.

ERE