Ouvir masquer une div

Version imprimable

11/06/2009, 11h19
Invité

Ouvir masquer une div

Bonjour, je sais qu'il s'agit d'un sujet récurant, mais n'ayant aucune connaissance en JS, rien trouvé de le net et des contraintes précises pour cette fonction, je fais donc appel a vous.

J'affiche le résultat d'une recherche d'écrivains sous forme de ligne (facile en php).
Chaque ligne contiendra deux liens ("ces écrits" / "ca vie").
Quand je clique sur l'un des liens une div doit s'ouvrir avec le contenu propre à l'écrivain.
Autre contrainte, le picto à coté de chaque lien doit changer afin de dir que la div est ouverte.
Enfin quand je clic sur une div ouverte elle se ferme, mais aussi, si la div 1 est ouverte et que je clic sur la div 2, la div1 doit se fermer.

Voici mes contraintes et là je suis incapable de faire ça :(
Merci de votre aide
11/06/2009, 12h12
Socki

Bonjour,

Ça serait bien si tu pouvais me donner un morceau de code, pour savoir où tu en es.

Socki

Citation:

Envoyé par christobale

("ces écrits" / "ca vie")

OH MON DIEU...

Sinon :

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<title>Page de test HTML/JS</title>
</head>
<body>
 
<img id="imgEcrits" src="img1.jpg" alt="blabla" /><button type="button" onclick="show('ecrits');">Ses &eacute;crits</button><img id="imgVie" src="img1.jpg" alt="blabla" /><button type="button" onclick="show('vie');">Sa vie</button>
<div id="ecrits" style="display:none;">Ses &eacute;crits</div>
<div id="vie" style="display:none;">Sa vie</div>
 
<script type="text/javascript">
function show(id){
        var vie=document.getElementById('vie'),
        ecrits=document.getElementById('ecrits'),
        imgVie=document.getElementById('imgVie'),
        imgEcrits=document.getElementById('imgEcrits');
        if(id=='vie'){
                ecrits.style.display='none';
                if(vie.style.display!=='block'){
                        vie.style.display='block';
                        imgVie.src='img2.jpg';
                }else{
                        vie.style.display='none';
                        imgVie.src='img1.jpg';
                }
        }else if(id=='ecrits'){
                vie.style.display='none';
                if(ecrits.style.display!=='block'){
                        ecrits.style.display='block';
                        imgEcrits.src='img2.jpg';
                }else{
                        ecrits.style.display='none';
                        imgEcrits.src='img1.jpg';
                }
        }
}
</script>
</body>
</html>