Ouvir masquer une div

Invité · 11/06/2009, 11h19

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

**Socki** · 11/06/2009, 12h12

Bonjour,

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

Socki

**k1rby** · 11/06/2009, 14h43

Envoyé par christobale

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

OH MON DIEU...

Sinon :

Code HTML :

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
<!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>

Ouvir masquer une div

JavaScript

Discussions similaires

Partager

Partager