afficher disparaitre div code incomplet

laurent94 · 06/05/2011, 21h33

Bonsoir tout le monde,

Je ne connais pas grand chose au javaScript, je suis donc aller sur le net pour chercher un script qui pourrait me convenir, mais malheureusement il manque une fonction....

Voila, le script indique que lorsque je clique sur le lien (1) il affiche la div 1 de même que lorsque je clique sur le lien 2 il affiche la div 2.
Un deuxième clique masque la div en question.

voici le code javascript :

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
function cachetr(idTemp) {
 
          var idT =idTemp;
 
 
 
 
 
         if (document.getElementById(idT).style.display == 'none') {
 
             document.getElementById(idT).style.display = '';
 
         } 
 
 
 
 
 
         else { document.getElementById(idT).style.display = 'none' }
 
     }

et le code que je mets dans mes de liens :

Code html :

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

1
2
<li class="resa"><a onclick="cachetr('texte-resa');"></a></li>
      <li class="infos"><a onclick="cachetr('texte-info');"></a></li>

Ce que je souhaiterai rajouter avec votre aide, c'est que si le "id" "text-resa" est affiché, le fait de cliquer sur le lien "text-info" le masque pour afficher le "id" "texte-info" et de même pour le contraire.

Je ne sais pas si c'est compréhensible ce que je viens de dire...

Merci pour votre aide je l'espère.

Bonne soirée.

Watilin · 06/05/2011, 23h00

Salut,
je crois que je vois ce que tu veux dire, et il y a de nombreuses manières de la faire… Voici ce que je propose.

Premièrement, rajoutons une fonction assez simple :

Code JavaScript :

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

1
2
3
function masquer( id ) {
    document.getElementById(id).style.display = 'none';
};

Ensuite, rajoutons un peu de code dans les liens :

Code HTML :

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

1
2
<li class="resa"><a onclick="cachetr('texte-resa'); masquer('text-info');"></a></li>
<li class="infos"><a onclick="cachetr('texte-info'); masquer('text-resa');"></a></li>

Et c'est tout ! (j'ai pas testé, tiens-moi au courant).

laurent94 · 06/05/2011, 23h20

Je me retrouve avec le même problème à savoir que que si je clique sur "text-resa" la div s'affiche et si je re-clique elle disparait. donc cool le probleme vient du fait que si ma div "text-resa est affichée et que je clique sur le bouton text-info, la div text-info apparait mais, vient se placer en-dessous de la div text-resa qui elle devrait disparaitre au profit de la div text-info...

Je mis perd moi même dans les explications..

Voici mon html par défaut :

Code html :

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
<!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" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="../design.css" />
<script type="text/javascript">
 
     function cachetr(idTemp) {
 
          var idT =idTemp;
 
 
 
 
 
         if (document.getElementById(idT).style.display == 'none') {
 
             document.getElementById(idT).style.display = '';
 
         } 
 
 
 
 
 
         else { document.getElementById(idT).style.display = 'none' }
 
     }
 
</script>
<title>Infos et Réservation</title>
</head>
 
<body id="accueil-bg">
<div id="wapper">
  <div id="colonne-gauche">
    <div id="logo"> <a href="../index.html"><img src="../images/logo.png" width="262" height="163" alt="logo monkey drop"/></a></div>
    <div id="nav">
      <ul>
        <li class="nav-home"><a href="../index.html"></a></li>
        <li class="nav-festival"><a href="../festival/festival.html"></a></li>
        <li class="nav-artiste"><a href="../artistes/artistes.html"></a></li>
        <li class="nav-infos"><a href="infos-reservation.html"></a></li>
        <li class="nav-participer"><a href="../participer/participer.html"></a></li>
        <li class="nav-photos"><a href="../photos/photos.html"></a></li>
        <li class="nav-contact"><a href="../contact/contact.html"></a></li>
      </ul>
    </div>
  </div>
  <div class="resa"></div>
  <div class="info"></div>
  <div class="nav-resa">
    <ul>
      <li class="resa"><a onclick="cachetr('texte-resa');"></a></li>
      <li class="infos"><a onclick="cachetr('texte-info');"></a></li>
    </ul>
  </div>
  <div class="lignebis"></div>
  <div id="texte-resa" style="display:none"> <img src="../images/nouveaute.png" width="115" height="44" alt="nouveauté" />
    <div class="texte1-resa"> Nous n'avons plus les billets Paris-Montpellier du Vendredi 1er juillet !<br />
      C'est pourquoi le festival débutera Samedi 2 Juillet et se terminera<br />
      Dimanche 3 juillet. </div>
    <div style="width:197px; height:1px; background-color:white; margin-left:150px; margin-bottom:10px;"> </div>
    <div class="texte1-resa"> <span style="color:#46704e"> > FORMULE 1 :</span> Des navettes viendront vous chercher samedi 2 juillet à<br />
      la Gare de Montpellier à midi et vous déposera directement sur le site !<br />
      Pour le retour, il y aura plusieurs horaires de départ le dimanche ! </div>
    <div class="texte1-resa"> <span style="color:#0097c9"> > FORMULE 2 :</span> Pour ceux qui viennent en voiture : l'endroit doit rester <br />
      secret. Vous n'aurez qu'à suivre les navettes pour découvrir le Monkey !<br />
      RV samedi midi au Parking du pont des Ravins des Arcs. </div>
    <div class="texte1-resa">
      <div class="g-formule"><span style="color:#ffe000">MONKEY DROP n'accueillera que 300 personnes !</span> <br />
        Vous pouvez réserver dès maintenant : Paypal</div>
      <div class="d-formule"> <img style="margin:0; margin-left:10px; float:left;" src="../images/formule1.png" width="68" height="18" alt="formule 1" /> <span style="line-height:20px; color:#ffe000; margin-left:5px;">à 20€/pers</span> <br />
        <img style="margin:0; margin-left:10px; float:left;" src="../images/formule2.png" width="68" height="18" alt="formule 2" /><span style="line-height:20px; color:#ffe000; margin-left:5px;"> à 10€/pers</span></div>
    </div>
    <div style="width:197px; clear:both; height:1px; background-color:white; margin-left:150px; margin-bottom:10px;"> </div>
    <div class="texte1-resa">L'espace est composé de plusieurs champs (6hectares au total) qui vous<br />
      permettra si vous le souhaitez de camper sur place ! (Toute sortie sera<br />
      définitive). </div>
  </div>
  <div id="texte-info"  style="display:none">
    <div class="nourriture"> <img src="../images/nourriture.png" width="123" height="39" alt="nourriture" />
      <div class="texte-nourriture">Afin de proposer de la nourriture de qualité et des prix attractifs, nous nous occupons nous-même de la nourriture. Une équipe de 10 cuisiniers sera présente pendant le workshop et le festival, et proposera des plats simples mais qui satisferont le plus grand nombre : salades de pâtes ; riz et légumes ; et même, un barbecue géant !</div>
      <div style="width:197px; height:1px; background-color:white; margin-left:25px; margin-bottom:10px; margin-top:10px;"> </div>
      <table width="168" style="margin-left:35px">
        <caption style="text-align:left">
        petit-déjeuner
        </caption>
        <tr>
          <td width="136" style="border-bottom:solid 1px #FFF">(café/thé, croissant):</td>
          <td width="8" style="border-bottom:solid 1px #FFF;color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">déjeuner / dîner </td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">4€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">crêpe</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">fruit</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">1€</td>
        </tr>
      </table>
    </div>
    <div class="boisson"> <img src="../images/boisson.png" width="98" height="37" alt="boisson" />
      <table width="168" style="margin-left:35px;margin-top:20px;">
        <tr>
          <td width="136" style="border-bottom:solid 1px #FFF">bière (50cl)</td>
          <td width="8" style="border-bottom:solid 1px #FFF;color:#ffe001;">3€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">punch </td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">shot</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">vin</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">3€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">jus de fruits </td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">cocktails</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">4€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">eau</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">2€</td>
        </tr>
        <tr>
          <td style="border-bottom:solid 1px #FFF">café</td>
          <td style="border-bottom:solid 1px #FFF; color:#ffe001;">1€</td>
        </tr>
      </table>
      <div style="width:197px; height:1px; background-color:white; margin-left:25px; margin-bottom:25px; margin-top:25px;"> </div>
      <div class="texte-boisson"> tous les artistes plasticiens réaliseront des t-shirts uniques et collectors, des œuvres d'art qui seront vendues pendant le festival au prix de <span style="color:#ffe001">15€ !</span> </div>
    </div>
    <div class="texte-info-inf">
      <div class="texte-info">Une équipe sera présente pendant tout le festival afin d'assurer votre sécurité et celle de la propriété. Nous vous remercierons d'être respectueux envers le lieu.
        Le lieu se situant dans un espace privé, nous allons tout mettre en place pour protéger et respecter l'environnement. Sur tout le territoire : de nombreux cendriers en sable, des poubelles, des bénévoles-propreté ...
        Aussi, pour ce qui est des toilettes, nous allons utiliser le système des toilettes sèches, en travaillant avec l'Agence ECOLETTE.</div>
    </div>
  </div>
  <div id="logo-assos"><img src="../images/logo-assos.png" width="110" height="62" alt="logo association" /></div>
</div>
</body>
</html>

Pour mieux comprendre voici des images :

1 - on arrive sur la page voici ce qu'il y à :

2 - on clique sur Réservé :

3 - on clique sur Info (resa disparait) :

Sauf que voici ce que cela donne lorsque je clique sur info apres avoir cliqué sur resa :

Merci de ton aide

Watilin · 07/05/2011, 23h28

Bonsoir,

mea culpa, j'ai oublié les « e »…

Code HTML :

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

1
2
<li class="resa"><a onclick="cachetr('texte-resa'); masquer('texte-info');"></a></li>
<li class="infos"><a onclick="cachetr('texte-info'); masquer('texte-resa');"></a></li

J'ai testé dans mon coin, normalement avec ça ça marche nickel.

Tiens-moi au courant

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email