Petit soucis d'affichage avec javascript

**polymorphisme** · 18/03/2011, 12h39

Bonjour à tous,

j'ai un soucis avec un script qui permet d'afficher des blocs pour des nouvelles.

La structure HTML est simple : le premier bloc est un titre, le second bloc est un texte. Lorsque l'on clique sur un bloc titre, le bloc texte est sensé s'afficher s'il était invisible ou devenir invisible s'il était affiché.

Enfin, le premier couple de bloc titre/texte doit être avoir un texte affiché afin que la présentation soit correcte, malheureusement, avec le code ci-dessous, il faut cliquer deux fois sur le titre de la première nouvelle pour que le texte devienne invisible, vous l'aurez deviner, c'est le soucis !

Je cherche donc comment faire pour que l'on ait besoin de cliquer une seule fois sur le titre de la première nouvelle pour que le texte devienne invisible.

Voici le code complet (il est aussi disponible dans l'archive zip avec les images qui vont bien avec)

Merci de vos lumières.

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
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.displayNone { display: none; }
.displayBlock { display: block; }
.displayOpen { background: url('iconNavOpenGray-32x32.png') no-repeat center left; }
.displayClose { background: url('iconNavCloseGray-32x32.png') no-repeat center left; }
</style>
 
<script type="text/javascript">
 function displayBlock(obj){
  var open = 'url("iconNavOpenGray-32x32.png")';
  var close = 'url("iconNavCloseGray-32x32.png")';
 
  if(document.getElementById)  {
    var el = document.getElementById(obj);
    var title = document.getElementById(obj+'Head');
 
    if(el.style.display != "block"){ 
      title.style.backgroundImage = open;
      el.style.display = "block";
    }else{
      title.style.backgroundImage = close;
      el.style.display = "none";
    }
  }
}
</script>
</head>
<body>
 
<h2 class="displayOpen" onclick="displayBlock('N10022')" id="N10022Head">
La bataille de l’Atlantique commence !
</h2>
<div class="displayBlock" id="N10022">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
</div>
 
<h2 class="displayClose" onclick="displayBlock('N10031')" id="N10031Head">
Du cap Horn aux îles Wollaston
</h2>
<div class="displayNone" id="N10031">
Puis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
 
</body>
</html>

**SpaceFrog** · 18/03/2011, 12h56

les displays sont ils initialisés dans le css ? vu qu'il ne le sont pas au niveau des balises ...

**polymorphisme** · 18/03/2011, 16h09

Bonjour SpaceFrog,

les displays sont ils initialisés dans le css ?

C'est-à-dire ?

**SpaceFrog** · 18/03/2011, 16h11

lors du premier click tes objets n'ont pas de display...

**javatwister** · 18/03/2011, 17h10

Code :

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

1
2
3
4
5
6
7
8
if(el.style.className==".displayBlock"){
     el.style.className=".displayNone";
     title.style.backgroundImage = open;
}
else{
     el.style.className=".displayBlock";
     title.style.backgroundImage = close;
}

**polymorphisme** · 18/03/2011, 17h53

Voici une solution fonctionnelle :

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
function displayBlock(id) {
 
  if (document.getElementById) {
    var title = document.getElementById(id+"Head");
    var el = document.getElementById(id);
 
    if (el.className == "displayBlock") {
      title.className = "displayClose";
      el.className = "displayNone"; }      
    else {      
	  title.className = "displayOpen";        
	  el.className = "displayBlock";               
    }
  }
}

Merci à tous deux.

Petit soucis d'affichage avec javascript

JavaScript

Discussions similaires

Partager

Partager