Fonction afficher cacher element avec display:block

**babyboy6492** · 15/11/2010, 14h25

Bonjour à tous,

J'ai fait une petite fonction javascript toute simple qui affiche ou cache une div lorsque l'on clique sur un bouton:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id,afficher,cacher)
{
        if(document.getElementById(id).style.display!="none")
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).value=''+afficher+'';
        }
        else
        {
                document.getElementById(id).style.display="block";
                document.getElementById('bouton_'+id).value=''+cacher+'';
        }
        return true;
}

Et voici un exemple d'utilisation:

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
<dt><strong><h2><input type="button" id="bouton_Autres/Divers" value="+" style="width:10px;" onclick="javascript:afficher_cacher('Autres/Divers','+','-');" />Autres/Divers</h2></strong></dt>
     <div id="Autres/Divers" class="Autres/Divers" style="display:none">
			<dd><em><h3>Documentation</h3></em></dd>		
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/8">Documentation</a></span>
                        <span class="decalage_fichiers">4,18 Mo</span>
                    </div>
 
			<dd><em><h3>Master</h3></em></dd>		
					<div class=even>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/6">Boot dell 360 PVP</a></span>
                        <span class="decalage_fichiers">2 Mo</span>
                    </div>
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/7">Master XP - Installation - V1A</a></span>
                        <span class="decalage_fichiers">1 Mo</span>
                    </div>
 
	</div>
<dt><strong><h2><input type="button" id="bouton_LEDA" value="+" style="width:10px;" onclick="javascript:afficher_cacher('LEDA','+','-');" />LEDA</h2></strong></dt>
     <div id="LEDA" class="LEDA" style="display:none">
			<dd><em><h3>Documentation</h3></em></dd>		
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/8">Documentation</a></span>
                        <span class="decalage_fichiers">4,18 Mo</span>
                    </div>
 
			<dd><em><h3>Master</h3></em></dd>		
					<div class=even>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/6">Boot dell 360 PVP</a></span>
                        <span class="decalage_fichiers">2 Mo</span>
                    </div>
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/7">Master XP - Installation - V1A</a></span>
                        <span class="decalage_fichiers">1 Mo</span>
                    </div>
 
	</div>

Sous Firefox ca fonctionne bien. Par contre sous IE 8, voila ce que ca me donne lorsque je déroule un élément:

Au lieu de:

Sous IE 6 c'est encore pire: les éléments se placent partout sur la fenetre et le display:none ne fonctionne pas...

Merci de votre aide

**Bovino** · 15/11/2010, 14h30

Le slash n'est pas autorisé pour un id et perturbe probablement IE.

**babyboy6492** · 15/11/2010, 14h52

En remplacant par Autres seulement, le problème persiste...

**babyboy6492** · 17/11/2010, 13h24

J'ai fait pas mal de manipulation et j'en suis arrivé à la conclusion que ce qui me gène c'est la gestion de bords arrondis qui est effectué par du javascript (curvycorners.src.js) pour IE alors que pour Firefox c'est du CSS.

Si je retire l'appel à curvycorners.src.js, mon script fonctionne bien...

Une idée du pourquoi du comment?

**Bovino** · 17/11/2010, 13h29

J'imagine que le script fixe la hauteur de la div afin de pouvoir ajouter les éléments supplémentaires pour afficher les coins arrondis et passe le overflow en hidden, du coup la div ne se redimensionne pas automatiquement lors de la modification de son contenu.