Discussion :

[copin]

Bonjour à tous,

Le problème est dans le titre cette fonction ne fonctionne pas sous IE par contre pas de problème sous Firefox.

J'utilise la version v1.3.2 de JQuery

Mon 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
 
<script type="application/javascript">
 $(document).ready(function () {
 var div1 = document.getElementById('accordion_content_1');
div1.style.display = 'none';
 
 var div2 = document.getElementById('accordion_content_2');
div2.style.display = 'none';
 
 var div3 = document.getElementById('accordion_content_3');
div3.style.display = 'none';
 })
 
function display(bookid){
book=document.getElementById(bookid);
if(book.style.display=="block"){
  book.style.display="none";
  }else{
  book.style.display="block";
  }
}
 
</script>

Ce code sert simplement à mettre en place un système d'ascenseur. Je sais que la bibliotheque Jquery permet de mettre cela en place facilement mais dans mon cas le plier/deplier est déclencher à deux endroits différents dans la page.

Les ascenseurs sont initialiser à display:block; pour une question d'accessibilité.

Merci beaucoup!

[Tristan Zwingelstein]

Il manque un point virgule avant function display ...
IE est un peu exigeant sur la syntaxe js.

[copin]

Merci pour la correction,

Mais malheureusement il n'y a pas de changement.

J'ai creusé un peu la question de mon côté en exploitant un peu mieux JQuery. J'arrive à exploiter le "toggle"

Mais:
- Les div sont déployées par défaut. Je l'ai souhaiterai plier. Mais le plier/déplier fonctionne ensuite.
- Sous IE les DIV sont déployées par défaut et sont totalement bloquées.

Le code nouvelle version

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
 
<script type="application/javascript">
 
  $(document).ready(function(){
 
    $(".accordion_toggler_1").click(function () {
      $("div.accordion_content_1").toggle("slow");
    });    
 
	 $(".accordion_toggler_2").click(function () {
      $("div.accordion_content_2").toggle("slow");
    });    
 
	 $(".accordion_toggler_3").click(function () {
      $("div.accordion_content_3").toggle("slow");
    });    
 
  });
 
</script>

encore merci!

[julioooo]

Salut,
Par défaut tes div tu ne les affiches pas

Code :

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

1
2
3
4
 
.accordion_content_1{
      display: none;
}

Et j'aurai plus fait ça avec le JS

Code :

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

1
2
3
4
5
6
7
8
9
 
      $(".accordion_toggler_1").toggle(
                   function () {
                      $(".accordion_content_1").show("slow");
                   },
                   function(){
                      $(".accordion_content_1").hide("slow");    
                   }
      );

[copin]

Salut,

Merci de la réponse

Par défaut tes div tu ne les affiches pas

Justement si par défaut je n'affiche pas mes div lorsque le javascript sera désactivé, le contenu ne sera plus accessible. Ce qui niveau accessibilité n'est pas correct. C'est le js qui doit initialiser le display:none des div.

J'ai cependant trouvé la solution à mon problème.

Le problème sous IE venait de cette ligne de code dans la déclaration du type

Code :

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

<script type="application/javascript">

Au final j'ai donc une fonction que fait ce que je souhaite. YA certaienement moyen de faire plus propre. Je regarderai pour faire mieux.

Au final

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
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
   $(".accordion_content_1").css("display","none");
   $(".accordion_content_2").css("display","none");
   $(".accordion_content_3").css("display","none");
 
  $(".accordion_toggler_1").click(function () {
      $("div.accordion_content_1").slideToggle("slow");
	  $(".accordion_content_2").css("display","none");
   	  $(".accordion_content_3").css("display","none");
    });    
 
	 $(".accordion_toggler_2").click(function () {
      $("div.accordion_content_2").slideToggle("slow");
	   $(".accordion_content_1").css("display","none");
  	   $(".accordion_content_3").css("display","none");
    });    
 
	 $(".accordion_toggler_3").click(function () {
      $("div.accordion_content_3").slideToggle("slow");
	   $(".accordion_content_1").css("display","none");
       $(".accordion_content_2").css("display","none");
    });    
 
  });
 
</script>

Merci.