Bonjour,
Je me tourne vers vous après avoir cherché une solution. J'espère que je suis dans le bon forum.
Voilà j'ai le code ci-dessous dont le DOM est un peu complexe pour ce que je veux faire, il est issu d'un CMS et je ne peux pas le simplifier.
Ce que je veux faire : en cliquant sur un titre j'affiche une div qui est cachée tout en masquant ma précédente
Le problème c'est que lorsque je clique sur un titre j'affiche toutes les DIV !
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
|
<!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>template3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.mod_3264662 h2").click(function(){
$("#mod_3264662 .photo").slideToggle("slow")
.siblings("#mod_3264662 .photo").slideUp("slow");
$("div.mod_3264662_cnt").slideToggle("slow")
.siblings("div.mod_3264662_cnt:visible").slideUp("slow");
});
});
</script>
<style>
/*Les classes génériques*/
.clear {clear: both;}
/*Les vivriers méconnus*/
#mod_3264662 { width: 580px; }
#mod_3264662 p {margin-bottom:12px; }
#mod_3264662 h2{color:#FF6600;cursor: pointer; }
#mod_3264662 ul {padding-left:12px }
#mod_3264662 li {padding-bottom:7px }
#mod_3264662 .texte .access {text-align:justify; }
#mod_3264662 .texte .access h3 {color:#FF6600; }
#mod_3264662 .texte .access a{color:#FF6600;text-decoration:underline;font-weight:normal }
.mod_3264662_cnt{display:none}
#mod_3264662 .chapeau h3, #para_2 .chapeau,#para_3 .chapeau ,#para_4 .chapeau,#para_5 .chapeau {font-weight:normal;font-size:12px;font-family:"Arial",sans-serif;text-align: justify; }
#mod_3264662 .photo {display:none}
#mod_3264662 .recherche-bloc-tv{width:566px;color: #000000;height:105px;margin:10px 0 20px -10px;padding: 10px 0 0 10px;position: relative; }
#mod_3264662 .recherche-bloc-tv .illustration {border-bottom: 1px solid #FF3E9B;float: left;margin: 2px 10px 5px 0;padding: 0 0 2px;}
.mod_3264662_cnt .recherche-bloc-tv .texte_viv p { font-size: 12px;line-height: 18px;margin: 0 10px 5px;text-align: justify;}
.mod_3264662_cnt .recherche-bloc-tv .logo-tv {float: right;position: absolute;right: 12px;/*margin: -3px 10px 0 0;*/}
#mod_3264662 .recherche-bloc-tv .ico-voir-viv {float: right;margin:-20px 10px 50px 0;}
#mod_3264662 .recherche-bloc-tv .titre {border-bottom: 1px solid #FF3E9B;color:#000000;font-size: 13px;font-weight: bold;padding: 0 0 10px;}
#mod_3264662 .recherche-bloc-tv .titre a {color: #000000;font-size: 13px;font-weight: bold;text-decoration: none;}
#mod_3264662 #trucs-astuces { margin-top:60px;margin-bottom:5px; }
</style>
<head>
<body>
<div class="inner">
<div class="mod_3264662" id="mod_3264662">
<div class="cel1">
<div class="titre">
<h2 class="access">1. Lorem Ipsum is simply dummy text of the printing </h2>
</div>
<div class="date" id="date">
<div class="access">Mardi 9 Août 2011</div>
</div>
<div class="chapeau">
<h3 class="access">Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau</h3>
</div>
<br class="sep_para access" id="sep_para_1">
<div class="para_4559471 resize" id="para_1">
<div class="photo left"><img alt="" src="http://www.wmaker.net/management21/photo/art/default/3187835-4559471.jpg?v=1312893566"></a></div>
<div class="texte">
<div class="access firstletter">
<div class="mod_3264662_cnt">
<p>
industry. Lorem Ipsum has been the industry. Lorem Ipsum has been the industry. Lorem Ipsum has been the industry. Lorem Ipsum has been the .
</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br class="sep_para access" id="sep_para_2">
<div class="para_4561968 resize" id="para_2">
<div class="texte">
<div class="access firstletter">
<h2>2. Lorem Ipsum is simply dummy text of the printing</h2>
<div class="chapeau">Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau</div>
<div class="mod_3264662_cnt">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br class="sep_para access" id="sep_para_3">
<div class="para_4562181 resize" id="para_3">
<div class="texte">
<div class="access firstletter">
<h2>3. Lorem Ipsum is simply dummy text of the printing</h2>
<div class="chapeau">Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau</div>
<div class="mod_3264662_cnt">
<p>Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br class="sep_para access" id="sep_para_4">
<div class="para_4562239 resize" id="para_4">
<div class="texte">
<div class="access firstletter">
<h2>4. Lorem Ipsum is simply dummy text of the printing</h2>
<div class="chapeau">Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau</div>
<div class="mod_3264662_cnt">
<p>Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<br class="sep_para access" id="sep_para_5">
<div class="para_4563285 resize" id="para_5">
<div class="texte">
<div class="access firstletter">
<h2>5. Lorem Ipsum is simply dummy text of the printing</h2>
<div class="chapeau">Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau Chapeau</div>
<div class="mod_3264662_cnt">
<p>Lorem Ipsum is simply dummy text of the printing</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="ecart_col1" id="ecart_after_3264662"><hr></div>
</div>
</body>
</html> |
Je vous remercie pour votre aide
11/08/2011, 10h52
Besoin d'aide jquery
00
