Discussion :

[infoplus22]

Bonjour,

Je voudrais faire plusieurs boites qui se montrent et se cachent au click. J'ai utilisé ce code qui marche. Je voudrais faire la meme chose pour plusieurs boites mais je n'arrive pas. J'ai essayé de faire plusieurs tables mais ca ne marche pas. Vila 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
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function Suite(lien,affiche){
 
    var objet = document.getElementById(affiche); // entre les deux ' tu mes le nom du div que tu veux faire apparaître !
 
    if(objet.style.display == "none" || !objet.style.display){
 
        objet.style.display = "block";
        objet.style.overflow = "hidden"; 
        lien.innerHTML = "<img src='../../images/bt-open.gif'>";
 
        var hFinal      =     200;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     0;         //Hauteur initiale (la hauteur dès le début !)
 
        var timer;
        var fct =        function ()
        {
                hActuel  +=       20;     //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !
 
                objet.style.height     =     hActuel      +     'px';
 
                if( hActuel > hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                }
        };
        fct();
 
 
        timer = setInterval(fct,40);    //Toute les 40 ms
 
    }else if(objet.style.display == "block"){
 
        var hFinal      =     0;  //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
        var hActuel     =     200;         //Hauteur initiale (la hauteur dès le début !)
 
        var timer;
        var fct =        function ()
        {
                hActuel  -=   20;     //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
 
                objet.style.height     =     hActuel      +     'px';
 
                if( hActuel < hFinal)
                {
                        clearInterval(timer);   //Arrête le timer
                        objet.style.overflow    =   'inherit';
                        objet.style.display     =   "none";
                }
        };
        fct();
 
 
        timer = setInterval(fct,40);    //Toute les 40 ms
 
 
        lien.innerHTML = "<img src='../../images/bt-close.gif'>";
 
    }
}
</script>

et dans le body :

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
<table>
        <tr >
            <td  style="width: 20px;">
                <script>var popup1="popup1";</script>
                    <a href="javascript:;" onclick="Suite(this,popup1)"><img src='../../images/bt-close.gif'></a>
            </td>
            <td class="etat_titre" style="width: 700px;">
                Recherche Développement :
            </td>
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <div id="popup1" style="display: none; border: #000000 2px solid;">
                </div>
            </td>
        </tr>
</table>

Merci de m'aider!

[le_chomeur]

tes id doivent êtres uniquent :

Code :

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

1
2
3
4
                <div id="popup1" style="display: none; border: #000000 2px solid;">
                </div>
                <div id="popup2" style="display: none; border: #000000 2px solid;">
                </div>

et pour les appeler :

Code :

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

1
2
3
 
<a href="javascript:;" onclick="Suite(this,popup1)"><img src='../../images/bt-close.gif'></a>
<a href="javascript:;" onclick="Suite(this,popup2)"><img src='../../images/bt-close.gif'></a>

[SpaceFrog]

Code :

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

onclick="Suite(this,"popup1")

du string non ?

[infoplus22]

Ah ok merci je vois, et du coup pour différencier entre le titre et le contenu de chacune des boites je fais comment?


Merci

tes id doivent êtres uniquent :

Code :

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

1
2
3
4
                <div id="popup1" style="display: none; border: #000000 2px solid;">
                </div>
                <div id="popup2" style="display: none; border: #000000 2px solid;">
                </div>

et pour les appeler :

Code :

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

1
2
3
 
<a href="javascript:;" onclick="Suite(this,popup1)"><img src='../../images/bt-close.gif'></a>
<a href="javascript:;" onclick="Suite(this,popup2)"><img src='../../images/bt-close.gif'></a>

[le_chomeur]

une petite erreur pour les appeler :

Code :

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

1
2
3
<a href="javascript:;" onclick="Suite(this,'popup1')"><img src='../../images/bt-close.gif'></a>
<a href="javascript:;" onclick="Suite(this,'popup2')"><img src='../../images/bt-close.gif'></a>

[SpaceFrog]

et pendant ce temps la la grenouille emballait les tétards dans du papier alu ...

[infoplus22]

Ca marche sans les cotes.

Sinnon, pour avoir des titres différents et du contenu différent pour chaque Id je fas comment stp?

une petite erreur pour les appeler :

Code :

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

1
2
3
<a href="javascript:;" onclick="Suite(this,'popup1')"><img src='../../images/bt-close.gif'></a>
<a href="javascript:;" onclick="Suite(this,'popup2')"><img src='../../images/bt-close.gif'></a>

[infoplus22]

J'ai fais comme le code ci dessous mais je n'arrive pas à ouvrir chaque boite à part, quand j'essaye d'ouvrir la deuxième c'est la première qui s'ouvre!!

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
<table>
        <tr >
			<td class="etat_titre" style="width: 200px;">
                Recherche Développement :
            </td>
            <td  style="width: 20px;">
                <script>var popup1="popup1";</script>
                    <a href="javascript:;" onclick="Suite(this,popup1)">+</a>
			</td>
            <td class="etat_titre" style="width: 200px;">
                GCOS :
            </td>
            <td  style="width: 20px;">
                <script>var popup2="popup2";</script>
                    <a href="javascript:;" onclick="Suite(this,popup2)">+</a>
			</td> 
            </td>
        </tr>
        <tr>
            <td colspan=2>
                <div id="popup1" style="display: none; border: #000000 2px solid;"></div>
				<div id="popup2" style="display: none; border: #000000 2px solid;">
                </div>
            </td>
        </tr>

[SpaceFrog]

Ca marche sans les cotes.

ineptie !

[le_chomeur]

+1 ma grenouille ouvreuse de chocolat

[SpaceFrog]

Code :

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

1
2
  <script>var popup1="popup1";</script>
                    <a href="javascript:;" onclick="Suite(this,popup1)">+</a>

tu as raté ta carrière ....
fallait t'orienter vers le comique