DIV javascript

Version imprimable

DIV javascript

Bonjour j'ai ce code :

<script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function afficheId(baliseId) { if (document.getElementById && document.getElementById(baliseId) != null) { document.getElementById(baliseId).style.visibility='visible'; document.getElementById(baliseId).style.display='block'; } } function cacheId(baliseId) { if (document.getElementById && document.getElementById(baliseId) != null) { document.getElementById(baliseId).style.visibility='hidden'; document.getElementById(baliseId).style.display='none'; } } cacheId('contenu'); </script>
Avec dans le BODY : javascript:afficheId('p1');javascript:cacheId('p11');

Ce script sert a cacher ou afficher des DIV dans ma page.

Je voudrais le faire évoluer le script sans etre obligé de mettre cacheId, pour tous les Div que je veux ferme. Je veux juste qu'a l'ouverture d'un tous les autres se ferment.

Merci de m'éclairer !

11/01/2008, 18h35
SpaceFrog
dans une boucle sur tous les elements concernés avec une fonction

genre:
Code:

1 2 3 4 5 6 function swapShox(obj){ for (i=0;i<collectiondiv.length;i++){ collectiondiv[i].style.display=(collectiondiv[i]=obj)?'block':'none'; } }
et en l'appelant dasn un onclick:

Code:

<div onclick="swapshow(this)">
11/01/2008, 18h45
laxe13

op

merci pour la réponse, je ne vois pas comment l'utiliser, le onclick n'est pas dans le DIV, mais sur un lien hypertexte, j'ai donc un ID sur les div.

Merci
11/01/2008, 18h46
SpaceFrog

Code:

<a href="#" onclick="swapshow(document.getElementById('mondiv'));return false;">lien</a>
11/01/2008, 18h47
laxe13

je vais essayer merci !

Cela me dis erreur sur la page. j'ai mis deux liens avec les deux div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<head>
<script>
function swapShox(obj){
 for (i=0;i<collectiondiv.length;i++){
    collectiondiv[i].style.display=(collectiondiv[i]=obj)?'block':'none';
    }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<a href="#"; onclick="swapshow(document.getElementById('p1'));return false;">lien 1</a>
<a href="#"; onclick="swapshow(document.getElementById('p2'));return false;">lien 2</a>
<div id="p1">OK POUR LE 1</div>
<div id="p2">OK POUR LE 2</div>
</body>
</html>

oui alors je ne doannais qu'un exemple ..pas le code complet ...

il fallait renseigner collectiondiv ...
et vérifier le nom de la fonction ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<script>
function swapshow(obj){
var collectiondiv=document.getElementsByTagName('div');
for (i=0;i<collectiondiv.length;i++){
collectiondiv[i].style.display=(collectiondiv[i]==obj)?'block':'none';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
 
<body>
<a href="#" onclick="swapshow(document.getElementById('p1'));return false;" ;>lien 1</a>     
<a href="#" onclick="swapshow(document.getElementById('p2'));return false;" ;>lien 2</a>     
<div id="p1">OK POUR LE 1</div>
<div id="p2">OK POUR LE 2</div>
</body>

11/01/2008, 19h03
laxe13

ok ca fonctionne niquel. Cependant un petit détail important c'est comment précisé que tel ou tel div soit ouvert au demarrage et les autres fermé, car la ils sont tous ouverts.

Merci
11/01/2008, 19h15
laxe13

J'ai trouvé, pour infos pour ceux qui ne savent pas non plus :

Mettre onload son div sur le body :

<body onload="swapshow(document.getElementById('p2'));return false;">

merci
11/01/2008, 19h26
SpaceFrog

pas besoin du return false dans ce cas là ..;

ou juste plus simplement dans les balises div qui ne doivent pas être visibles :

Code:

style='diplay:none'