Discussion :

[machipot]

Bonjour,

Ma question est comment, avec un click sur un objet genre petit triangle, fermer ou ouvrir un section dans la page web?

merci
voir l'image attachée pour mieux comprendre ma question.

[lion.maroc]

Salut!

la manière la plus simple c'est d'utiliser la javascript pour gérer la visibilité de ta section.

ça depend c vous utilisez un div ou table ....

Merci

[machipot]

Bonjour lion.maroc et autres,

tu as repondu a ma question de l'année 2007 mais c'est pas encore claire pour moi.
comment cacher ou montrer la section (voir code plus bas.. debut et fin section) on faisant un click sur l'icon de l'image affiché sur la page.

merci,

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
<%-- Fsp Status--%>
					<logic:iterate id="fsp" name="fspStatus" property="aryStudentFsp">
						<bean:define name="fsp" property="strInstlStatusId"
							id="statusIdFsp" />
 
						<TR>
							<TD colspan="3">&nbsp;</TD>
						</TR>
						<TR>
							<TD colspan="3"><IMG border="0" src="images/more.gif" width="9"
								height="7"><A href="<bean:write name="fsp" property="t_fsp_url" filter="true" />" >
								<bean:write name="fsp" property="strFspTitle" /></A>.
								<bean:write name="fsp" property="t_title_fsp_ses"/>.
 
							</TD>
						</TR>
 
------ Debut de la section a cacher ou mentrer ------------------------
						<tr class="col">
							<td>
							<p class="app"><strong><bean:message key="bursaryAmount" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryPayTyp" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryOpertDt" /></p>
							</td>
						</tr>
						<%--Installmet FSP--%>
						<logic:iterate id="fspInstallment" name="fsp"
							property="aryStudentInstallment">
							<bean:define name="fspInstallment" property="instlStatusId"
								id="statusIdInst" />
 
							<TR
								bgcolor=<%	if(rowcount == 1){
								out.print("#ffffff");
									rowcount = 0;
								}else{
									out.print("#FAF0E6");
									rowcount = 1;
								}
							%>>
 
								<TD align="right"><bean:write name="fspInstallment"	property="instlAmount" 
													 formatKey='amountFormat' />
								</TD>
								<TD><bean:write name="fspInstallment"
									property="strInstlStatusDesc" filter="false" /></TD>
								<TD align="center"><bean:write name="fspInstallment"
									property="instlTransf" /></TD>
 
								<%--Installmet FSP--%>
						</logic:iterate>
 
						<%--Fsp Status--%>
					</logic:iterate>
------ Fin de la section a cacher ou mentrer ------------------------

[mattheox]

salut, un truc dans le genre devrait fonctionner...
j'ai mis en rouge les "nouveautés".

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
<%-- Fsp Status--%>
					<logic:iterate id="fsp" name="fspStatus" property="aryStudentFsp">
						<bean:define name="fsp" property="strInstlStatusId"
							id="statusIdFsp" />
 
						<TR>
							<TD colspan="3">&nbsp;</TD>
						</TR>
						<TR>
							<TD colspan="3"><IMG border="0" src="images/more.gif" width="9"
								height="7" onclick="gererContenu(this, 'trContenu');"><A href="<bean:write name="fsp" property="t_fsp_url" filter="true" />" >
								<bean:write name="fsp" property="strFspTitle" /></A>.
								<bean:write name="fsp" property="t_title_fsp_ses"/>.
								
							</TD>
						</TR>
 
------ Debut de la section a cacher ou mentrer ------------------------
						<tr class="col" id="trContenu" style="display:none;">
							<td>
							<p class="app"><strong><bean:message key="bursaryAmount" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryPayTyp" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryOpertDt" /></p>
							</td>
						</tr>
						<%--Installmet FSP--%>
						<logic:iterate id="fspInstallment" name="fsp"
							property="aryStudentInstallment">
							<bean:define name="fspInstallment" property="instlStatusId"
								id="statusIdInst" />
 
							<TR
								bgcolor=<%	if(rowcount == 1){
								out.print("#ffffff");
									rowcount = 0;
								}else{
									out.print("#FAF0E6");
									rowcount = 1;
								}
							%>>
 
								<TD align="right"><bean:write name="fspInstallment"	property="instlAmount" 
													 formatKey='amountFormat' />
								</TD>
								<TD><bean:write name="fspInstallment"
									property="strInstlStatusDesc" filter="false" /></TD>
								<TD align="center"><bean:write name="fspInstallment"
									property="instlTransf" /></TD>
 
								<%--Installmet FSP--%>
						</logic:iterate>
 
						<%--Fsp Status--%>
					</logic:iterate>
------ Fin de la section a cacher ou mentrer ------------------------
<script>
function gererContenu(image, id) {
// en fonction du mode, afficher ou cacher l'id
// Si la source de l'image est la flèche horizontale, il faut donc afficher l'élément, changer l'image du bouton pour afficher une flèche vers le bas
if (image.src == "images/more.gif") {
  document.getElementById(id).style.display = ""; // Afficher l'élément
  image.src="images/bottom.gif"; // mettre le nom de l'image avec la flèche vers le bas
} else {
  document.getElementById(id).style.display = "none"; // Cacher l'élément
  image.src="images/more.gif";
}
}
</script>