Afficher/masquer du contenu

**legrandse** · 10/09/2014, 15h05

Bonjour à tous,

Toujours en quête d'amélioration, je cherche le moyen d'afficher/masquer du contenu à l'aide du script ci-dessous.

Je précise que le script fonctionne, mais pas à 100%.

En fait quand je clique sur le "+" du premier élément, il affiche le contenu pour ce premier enregistrement. => a priori c'est correct.
Par contre je clique sur le "+" du second enregistrement et là, le script est en erreur car il m'affiche le contenu du 1er enregistrement sans trouver celui du 2ème.

2 petites images valent mieux que de longues explications:
Le premier est correct : Nom : correct.jpg
Affichages : 93
Taille : 236,4 Ko

Nom : correct.jpg
Affichages : 93
Taille : 236,4 Ko

Pas correct: Nom : pascorrect.jpg
Affichages : 99
Taille : 237,8 Ko

On voit que j'ai cliqué sur le second et il m'affiche le premier

Voici le 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
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
<body>
<!-- Le JS... -->
<script type="text/javascript">
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
  var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
  if(div.style.display=="none") { // Si le div est masqué...
    div.style.display = "block"; // ... on l'affiche...
    bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
  } else { // S'il est visible...
    div.style.display = "none"; // ... on le masque...
    bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
  }
}
</script>
 
 
 
<table> 
 
<tbody>
 
<?php
 
 
 
 
include("../../org/folder/data.php");
include("../../org/folder/connexion.php");
 
function ClassDate($date) {
   $now = date('Y-m-d');
   if ($date < $now) {
        return 'past';
   }
   elseif ($date > $now) {
       return 'futur';
   }
   else {
       return 'today';
   }
}
 
$next = TRUE;
 
$sql = "SELECT no,lieu, description, contact,  date_debut, date_format(date_debut, '%d.%m.%Y') AS date FROM agenda ORDER by date_debut ASC "; 
$req = mysql_query($sql);
 
$i = 0;
$c = 0;
 
while ($row= mysql_fetch_assoc($req)) {
 
   $ClassDate = ClassDate($row['date_debut']);
   if ($ClassDate == 'futur' && $next == TRUE) {
           $ClassDate = 'next';
           $next = FALSE;
   }
   $row['ClassDate'] = $ClassDate;
 
   $data[] = $row;
 
}
                                                                                                
for ($i = 0; $i <= 10; $i++) {
    if (!isset($data[$i])) { break; }
    else { ?>
 	<tr>
        <td> <div class=" <?php echo $data[$i]['ClassDate'];?>"> <button type="button" style="background:none; border:hidden" onclick="toggle_div(this,'subinfo');"><h7>+</h7></button></div></td> 
        <td>  <?php echo htmlspecialchars($data[$i]['lieu']);?><div id="subinfo" style="display:none;"><?php echo $data[$i]['description'];?></div></td>
        <td> <?php echo htmlspecialchars($data[$i]['date']);?></td>
 
 <?php
       $j = $i + 11;
       if (isset($data[$j])) { ?>
           <td><div class="<?php echo $data[$j]['ClassDate'];?>"> <button type="button" style="background:none; border:hidden" onclick="toggle_div(this,'subinfo');"><h7>+</h7></button> </div> </td> 
           <td> <?php echo htmlspecialchars($data[$j]['lieu']);?> </td>
           <td> <?php echo htmlspecialchars($data[$j]['date']);?> </td>
 
        <?php }
       else {
         echo '<td></td><td></td></tr>';
       }
   }
}
?>
 
</tbody>
 
</table> &nbsp;

En vous remerciant pour l'aide.

**sekaijin** · 11/09/2014, 07h22

merci de respecter la charte et d'afficher le source HTML
Pas de PHP dans le forum JS

seul le source présent dans le navigateur est exécuté côté client c'est le seul code qui permettra de t'aider.

A+JYT
j'aimerai qu'on ne me fasse pas un procès d'intention pour cette réponse qui n'a qu'un seul et unique but avoir les info pertinentes pour fournir une aide efficace.

**Bovino** · 11/09/2014, 08h18

Répété un nombre incalculable de fois : un id doit être unique dans la page !

**legrandse** · 11/09/2014, 10h48

Merci pour vos éclaircissements.

Initialement le message était posté dans la section PHP car je pensais que le problème venait de là.

Mais dans mon cas, la solution c'est de créer une incrémentation d' id de div en javascript non ?

Si c'est bien cela comment compléter le script existant ?

Voici le code complet:

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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<style>
html{
	font-family: "Open Sans", Segoe UI light, Verdana, Tahoma,Helvetica,sans-serif;
	font-size:13px;
	color: #FFF; /* MAIN color for site things, but not for CONTENT!! */
	background-color:#DDD; /* Main background color */
}
 
.past {
	background-color:#000;
	width:25px;
	height:25px;
 
 
}
 
.today {
	background-color:#f9eb1d;
	width:25px;
	height:25px;
	color:#333;
 
 
}
.next {
	background-color:#f9eb1d;
	width:25px;
	height:25px;
	color:#333;
 
}
.futur {
	background-color:#b7b6b5;
	width:25px;
	height:25px;
}
.close {
    position: absolute; 
	right: 10px;
    top: 0px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease 0s;
    display: inline-block;
    z-index: 50;
}
 
.close:hover{
	opacity: 1;
}
 
/*TABLE*/
table table,tr,td,th{
	margin:0;
	border:none;
}
table{
	color:#fff;
	border:1px solid #fff;
	border-top:none;
	border-left:none;
	border-right:none;
	width:700px;
 
	margin: 10px 0;
}
table td,th{
	padding:3px;
	text-align:left;
}
table thead{
	font-weight:bold;
	background-color:#666;
	border-bottom:1px solid #DDD;
	color:#FFF;
}
table tfoot{
	background:#777;
	font-style:italic;
}
table tr.dark,th.dark{
	background-color:#BBB;
}
 
 
#toggle{height:auto; }
#toggle p{text-align:center;padding:0}
</style>
 
 
</head>
 
<body>
<!-- Le JS... -->
<script type="text/javascript">
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
  var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
  if(div.style.display=="none") { // Si le div est masqué...
    div.style.display = "block"; // ... on l'affiche...
    bouton.innerHTML = "-"; // ... et on change le contenu du bouton.
  } else { // S'il est visible...
    div.style.display = "none"; // ... on le masque...
    bouton.innerHTML = "+"; // ... et on change le contenu du bouton.
  }
}
</script>
 
<div class="close">
<a href="#"><img src="../v4full/themes/gghf/img/panels/close.png" name="close" width="30" height="30" border="0" id="close2" /></a></div> 
<table> 
<tbody> 
<tr> <td>&nbsp; <strong>CALENDRIER GGHF 2014</strong></td> </tr>
</tbody> 
</table> &nbsp; 
 
<table> 
 
<tbody>
 
<?php
set_include_path("../");
include_once("inc/essentials.php");
 
 
 
include("../../org/folder/data.php");
include("../../org/folder/connexion.php");
 
function ClassDate($date) {
   $now = date('Y-m-d');
   if ($date < $now) {
        return 'past';
   }
   elseif ($date > $now) {
       return 'futur';
   }
   else {
       return 'today';
   }
}
 
$next = TRUE;
 
 
 
 
$sql = "SELECT no,lieu, description, contact,  date_debut, date_format(date_debut, '%d.%m.%Y') AS date FROM agenda ORDER by date_debut ASC "; 
$req = mysql_query($sql);
 
$i = 0;
$c = 0;
 
while ($row= mysql_fetch_assoc($req)) {
 
   $ClassDate = ClassDate($row['date_debut']);
   if ($ClassDate == 'futur' && $next == TRUE) {
           $ClassDate = 'next';
           $next = FALSE;
   }
   $row['ClassDate'] = $ClassDate;
 
   $data[] = $row;
 
}
                                                                                                
for ($i = 0; $i <= 10; $i++) {
    if (!isset($data[$i])) { break; }
    else { ?>
 	<tr>
        <td> <div class=" <?php echo $data[$i]['ClassDate'];?>"> <button type="button" style="background:none; border:hidden" onclick="toggle_div(this,'subinfo');"><h7>+</h7></button></div></td> 
        <td>  <?php echo htmlspecialchars($data[$i]['lieu']);?><div id="subinfo" style="display:none;"><?php echo htmlspecialchars($data[$i]['description']);?></div></td>
        <td> <?php echo htmlspecialchars($data[$i]['date']);?></td>
 
 <?php
       $j = $i + 11;
       if (isset($data[$j])) { ?>
           <td><div class="<?php echo $data[$j]['ClassDate'];?>"> <button type="button" style="background:none; border:hidden" onclick="toggle_div(this,'subinfo');"><h7>+</h7></button> </div> </td> 
           <td> <?php echo htmlspecialchars($data[$j]['lieu']);?><div id="subinfo" style="display:none;"><?php echo $data[$j]['description'];?></div></td>
           <td> <?php echo htmlspecialchars($data[$j]['date']);?> </td>
 
        <?php }
       else {
         echo '<td></td><td></td></tr>';
       }
   }
}
?>
 
</tbody>
 
</table> &nbsp; 
 
 
<table>
 <tfoot> 
 <tr> 
 <td style="text-align: center;"><img alt="" src="http://localhost/v4full/img/icons/next.jpg" style="width: 12px; height: 12px;" /> Prochaine rando&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img alt="" src="http://localhost/v4full/img/icons/futur.jpg" style="width: 12px; height: 12px;" />&nbsp; Randos &agrave; venir&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img alt="" src="http://localhost/v4full/img/icons/past.jpg" style="width: 12px; height: 12px;" />&nbsp; Randos termin&eacute;es</td> 
 </tr> 
 </tfoot> 
 </table> &nbsp; 
 
 
 
 
</body>
</html>

**Bovino** · 11/09/2014, 11h03

Il faut bien comprendre la portée et le rôle de PHP et de JavaScript.
PHP sert à produire le code HTML qui sera affiché par le navigateur.
JavaScript sert, une fois le contenu HTML affiché, à gérer les interactions avec l'utilisateur (je simplifie), par exemple, masquer ou afficher du contenu (d'où la raison du déplacement de ton message

).
Donc dans ton cas, la solution n'est pas d'affecter les id en JavaScript mais au moment où tu les écris : en PHP côté serveur.