Boites qui se développent

**Elocrate** · 15/10/2008, 17h43

Bonjour à tous,

Je suis à la recherche d'un "peaufinement de script" pour mon site.

Sur la page suivante : http://www.paris-sarlat.com/web/valades/tarifs.html
J'ai une boite qui se développe sous la ligne "escapade romantique".
J'ai effectué cela avec ce script :

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
<SCRIPT LANGUAGE="Javascript"> 
function show()
  {
  if(document.getElementById)
    {
    tabler = document.getElementById('table');
    if(tabler.style.display=="none")
      {
      document.getElementById('plus').innerHTML = '-';
      tabler.style.display="";
      }
    else
      {
      document.getElementById('plus').innerHTML = '+';
      tabler.style.display="none";
      }
    } 
  }
</script>

Je voudrais ajouter ce code sous chacune de mes lignes afin de détailler tous mes tarifs.

Seulement, je ne veux pas dépasser ma hauteur de mise en page.

Or, si je mets des boites partout, et que je développe tout, je suis hors des choux.

C'est pourquoi je voudrais trouver un ajustement de script qui me permettrait de fermer automatiquement une boite ouverte lorsque j'en ouvre une autre ! ^^

Est-ce possible ? Quelqu'un a-t-il une piste ?

Merci d'avance pour vos idées

**Bovino** · 15/10/2008, 17h55

J'ai pas regardé l'ensemble de ta page

mais je pense que tu devrais utiliser une variable globale dans laquelle tu stockes l'id de l'élément ouvert :

Code :

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

var ouvert='';

à déclarer en dehors de toute fonction

Puis dans ta fonction show(), tu testes d'abord si cette variable est nulle ou non

Code :

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

1
2
3
if(ouvert==''){
...
}

si c'est le cas, tu ouvres juste l'élément comme actuellement et tu stockes son id dans la variable

Code :

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

ouvert='id_de_element_ouvert';

sinon, tu fermes l'élément déjà ouvert puis tu ouvres le nouveau (en faisant attention que si tu veux fermer l'élément ouvert, il faut mettre la variable à '').

**Elocrate** · 15/10/2008, 19h47

Merci pour la réponse !

Mais en fait, je n'y connais pas grand chose en javascript, le code que j'ai effectué n'est pas de moi et je ne le comprends pas entièrement.

Est-ce que tu voudrais bien m'écrire ce code dont tu viens de me parler ?
(j'en serais incapable :/ )

**Elocrate** · 16/10/2008, 21h30

Est-ce que cela doit ressembler à quelque chose comme ça :/ ? :

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
<!-- Dans la partie HEAD -->
 
<SCRIPT LANGUAGE="Javascript"> 
 
var ouvert='';
 
function show()
  {
  if(document.getElementById)
    {
    tabler = document.getElementById('table');
    if(ouvert==''){
      {
      document.getElementById('plus').innerHTML = '-';
      tabler.style.display="";
      }
    else
      {
      document.getElementById('plus').innerHTML = '+';
      tabler.style.display="none";
      }
    } 
  }
</script>
 
 
 
<!-- Dans la partie BODY -->
 
<p>Ces prix comprennent :
	[<a href="#" onclick="show('Item1','item_1');return(false)" id="item_1">+</a>]</p>
	<span id="Item1" style="display:none">
	<br />
	L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2 visites par 		personne, 1 panier gourmand par personne, television incluse dans la location, 1 parure 	de draps par personne, 1 kit linge de toilette par personne
	</span>
</p>

**Bovino** · 16/10/2008, 22h52

Tu as de la chance, c'est mon jour de bonté... voici ton script (et les modifications à faire sur le html). Si tu ne comprends pas quelque chose, n'hésite pas à demander

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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><title>Location de vacance Dordogne</title>
 
 
 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="fr">
<meta name="author" content="Les Valades, séjours dordogne perigord">
<meta name="keywords" content="location de vacance dordogne, location de vacances dordogne, location de vacance périgord, location de vacances périgord, location chalet dordogne, location chalet périgord, location saisonnière dordogne, location saisonnière périgord, séjour chalet dordogne, séjour chalet périgord, périgord noir">
<meta name="description" content="Découvrez le lieu de vos prochaines vacances au coeur du Périgord Noir. Pour les inconditionnels de calme, de nature et les amoureux de la pêche.">
<meta name="classification" content="locations de vacances">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="10 days">
<link href="tarifs_fichiers/location_dordogne.css" rel="stylesheet" type="text/css">
<script src="tarifs_fichiers/AC_RunActiveContent.js" type="text/javascript"></script>
 
<script type="application/javascript">
var ouvert = '';
function show(elt) {
	var span = document.getElementById(elt.id.replace('_',''));
	if(ouvert==''){
		elt.innerHTML='-';
		span.style.display='';
		ouvert=elt.id;
	}
	else if(ouvert==elt.id){
		elt.innerHTML='+';
		span.style.display='none';
		ouvert='';
	}
	else{
		document.getElementById(ouvert).innerHTML='+';
		elt.innerHTML='+';
		document.getElementById(ouvert.replace('_','')).style.display='none';
		span.style.display='';
		ouvert=elt.id;
	}
}
</script></head><body>
<div id="container">
  <div id="header">
    <div id="ancre"></div>
    <div id="baseline">
      <p>Habitats de Loisir - Dordogne</p>
    </div>
  </div>
  <div id="wrap">
    <div id="left">
      <div id="menu"> <a href="http://www.paris-sarlat.com/web/valades/index.html">Home page</a> <a href="http://www.paris-sarlat.com/web/valades/hebergement.html">Hébergement</a> <a href="http://www.paris-sarlat.com/web/valades/sejours.html">Séjours</a> <a href="http://www.paris-sarlat.com/web/valades/dordogne.html">Dordogne</a> <a href="http://www.paris-sarlat.com/web/valades/tarifs.html">Tarifs</a> <a href="http://www.paris-sarlat.com/web/valades/contact.html">Contact</a> <a href="http://www.paris-sarlat.com/web/valades/liens.html">Liens</a> </div>
      <div id="mentions_legales"><p>COPYRIGHT © 2008 Les Valades Dordogne<br>
        création <a href="http://www.straw.fr/">Elodie Berger</a></p></div>
    </div>
    <div id="content">
      <div id="middle_tarifs">
        <h1>Nos tarifs 2009</h1>
        <p>Validité de l'offre : toute l'année hors juillet-août.</p>
        <p>&nbsp;</p>
        <div id="tarif_left">
        <h3>FORMULES SEJOURS - 4 jours / 3 nuits</h3>
        <table summary="tarifs des formules séjours" border="0" cellpadding="0" cellspacing="0">
          <tbody><tr class="toprow">
            <td>&nbsp;</td>
            <td>2 pers</td>
            <td>3 pers</td>
            <td>4 pers</td>
            <td>5 pers</td>
          </tr>
          <tr>
            <td class="leftcol">Escapade romantique</td>
            <td class="data">435 €</td>
            <td class="data">570 €</td>
            <td class="data">710 €</td>
            <td class="data">845 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_1">+</a>]</p>
<span id="item1" style="display: none;">
<br>
L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2
visites par personne, 1 panier gourmand par personne, television
incluse dans la location, 1 parure de draps par personne, 1 kit linge
de toilette par personne</span></td>
            </tr>
          <tr>
            <td class="leftcol">Séjour 2 CV</td>
            <td class="data">485 €</td>
            <td class="data">570 €</td>
            <td class="data">660 €</td>
            <td class="data">765 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_2">+</a>]</p>
<span id="item2" style="display: none;">
<br>
L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2
visites par personne, 1 panier gourmand par personne, television
incluse dans la location, 1 parure de draps par personne, 1 kit linge
de toilette par personne</span></td>
            </tr>
          <tr>
            <td class="leftcol">Equitation</td>
            <td class="data">485 €</td>
            <td class="data">570 €</td>
            <td class="data">660 €</td>
            <td class="data">765 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_3">+</a>]</p>
<span id="item3" style="display: none;">
<br>
L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2
visites par personne, 1 panier gourmand par personne, television
incluse dans la location, 1 parure de draps par personne, 1 kit linge
de toilette par personne</span></td>
            </tr>
          <tr>
            <td class="leftcol">Vélo</td>
            <td class="data">485 €</td>
            <td class="data">570 €</td>
            <td class="data">660 €</td>
            <td class="data">765 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_4">+</a>]</p>
<span id="item4" style="display: none;">
<br>
L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2
visites par personne, 1 panier gourmand par personne, television
incluse dans la location, 1 parure de draps par personne, 1 kit linge
de toilette par personne</span></td>
            </tr>
          <tr>
            <td class="leftcol">Golf</td>
            <td class="data">485 €</td>
            <td class="data">570 €</td>
            <td class="data">660 €</td>
            <td class="data">765 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_5">+</a>]</p>
<span id="item5" style="display: none;">
<br>
L'hebergement, 2 petits dejeuners par personne, 1 diner par personne, 2
visites par personne, 1 panier gourmand par personne, television
incluse dans la location, 1 parure de draps par personne, 1 kit linge
de toilette par personne</span></td>
            </tr>
          <tr>
            <td class="leftcol">Nuitée simple supplémentaire</td>
            <td class="data">60 €</td>
            <td class="data">80 €</td>
            <td class="data">100 €</td>
            <td class="data">120 €</td>
          </tr>
          <tr>
            <td class="descrip" colspan="5"><p>Ces prix comprennent :
[<a href="#" onclick="show(this);return(false)" id="item_6">+</a>]</p>
<span id="item6" style="display: none;">
<br>
Ces prix comprennent l’hebergement seul (petits-déjeuners en option)</span></td>
            </tr>
        </tbody></table>
 
 
        </div>
 
 
        <div id="tarif_up_right">
        <h3>HEBERGEMENT SIMPLE</h3>
        <table summary="tarifs en hébergement simple" border="0" cellpadding="0" cellspacing="0">
          <tbody><tr class="toprow">
            <td>&nbsp;</td>
            <td>2 pers</td>
            <td>3 pers</td>
            <td>4 pers</td>
            <td>5 pers</td>
          </tr>
          <tr>
            <td class="leftcol">3 nuits</td>
            <td class="data">170 €</td>
            <td class="data">190 €</td>
            <td class="data">210 €</td>
            <td class="data">230€</td>
          </tr>
          <tr>
            <td class="leftcol">4 nuits</td>
            <td class="data">210 €</td>
            <td class="data">240 €</td>
            <td class="data">270 €</td>
            <td class="data">300 €</td>
          </tr>
          <tr>
            <td class="leftcol">5 nuits</td>
            <td class="data">250 €</td>
            <td class="data">290 €</td>
            <td class="data">330 €</td>
            <td class="data">370 €</td>
          </tr>
          <tr>
            <td class="leftcol">6 nuits</td>
            <td class="data">290 €</td>
            <td class="data">335 €</td>
            <td class="data">380 €</td>
            <td class="data">425 €</td>
          </tr>
          <tr>
            <td class="leftcol">7 nuits</td>
            <td class="data">320 €</td>
            <td class="data">390 €</td>
            <td class="data">420 €</td>
            <td class="data">470 €</td>
          </tr>
        </tbody></table>
        </div>
 
        <div id="tarif_down_right">
        <h3>OPTIONS</h3>
        <table summary="tarifs des options" border="0" cellpadding="0" cellspacing="0">
          <tbody><tr>
            <td class="leftcol">Location lit bébé</td>
            <td class="datas">25 € / semaine</td>
          </tr>
          <tr>
            <td class="leftcol">Location chaise bébé</td>
            <td class="datas">25 € / semaine</td>
          </tr>
          <tr>
            <td class="leftcol">Petit déjeuner</td>
            <td class="datas">10 € / personne</td>
          </tr>
          <tr>
            <td class="leftcol">Location draps</td>
            <td class="datas">10 € / personne</td>
          </tr>
          <tr>
            <td class="leftcol">Kit linge de toilette</td>
            <td class="datas">10 € / personne</td>
          </tr>
        </tbody></table>
        </div>
 
        <div id="reserve">
          <a href="http://www.paris-sarlat.com/web/valades/FR_Contrat_2009.pdf"><img src="tarifs_fichiers/bouton_on.jpg" alt="telecharger un contrat de reservation"></a>        </div>
 
 
      </div>
  </div>
<div id="footer">
  <p><a href="http://www.paris-sarlat.com/web/valades/escapade.html">séjour romantique</a> - <a href="http://www.paris-sarlat.com/web/valades/sejours.html">idée week-end</a> - <a href="http://www.paris-sarlat.com/web/valades/2cv.html">séjour dordogne</a> - <a href="http://www.paris-sarlat.com/web/valades/chalet.html">location chalet bois</a> - <a href="http://www.paris-sarlat.com/web/valades/site.html">location pêche périgord</a> - <a href="http://www.paris-sarlat.com/web/valades/hebergement.html"> location saisonnière périgord noir</a> - <a href="http://www.paris-sarlat.com/web/valades/dordogne.html">séjour périgord noir</a> - <a href="http://www.paris-sarlat.com/web/valades/liens.html">locations de vacances dordogne</a></p>
  </div>
</div>
</div>
</body></html>

PS :
En vérité, je te l'ai fait pour 2 raisons :

J'avais un peu de temps.
Tu sembles montrer de la bonne volonté à chercher par toi-même !

EDIT :
Le code html a été copié via 'Enregistrer sous' de FF, il n'est donc pas valide xhtml strict car les balises autofermantes sont tronquées (par exemple, <br /> devient <br>), à rectifier...

**Elocrate** · 17/10/2008, 09h09

waouh, tu n'imagines pas à quel point cela peut me rendre service ;

un grand merci !!!!

Boites qui se développent

JavaScript

Vue hybride

Discussions similaires

Partager

Partager