Petit soucis d'affichage avec javascript [Résolu]

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,

Citation:

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.

18/03/2011, 12h56	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	les displays sont ils initialisés dans le css ? vu qu'il ne le sont pas au niveau des balises ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/03/2011, 16h11	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	lors du premier click tes objets n'ont pas de display... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

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