1 pièce(s) jointe(s)
Petit soucis d'affichage avec javascript
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. :ccool:
Code:
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> |
