Discussion :

[baggie]

Bonjour

Dans un div, j'ai une liste d'items.
Toujours dans ce div, j'ai d'autres divs : un pour chaque item, en "display:none".

Quand je clique sur un item, ça affiche le div correspondant.

Comment faire pour cacher tous les autres divs qui pourraient être déja affichés et n'afficher que le div concerné ?

J'ai regardé sur le forum et sur Google, j'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function showdiv(name)
{
	document.getElementsByTagName('div').style.display="none";
	document.getElementById(name).style.display="block";
}

mais ça ne fonctionne pas, d'autant plus que j'ai peur de cacher tous les divs de ma page en faisant ça et je ne veux pas.

Résumé de mon code HTML :

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
 
<div id="contenu">
   <div id="blabla">
     <div id="truc">Un autre truc</div>
     <div>
	<h3>Un titre</h3>
	  <ul>
		<li>Un autre titre</li>
	        <ul>
			<li onClick="showdiv('itemun')">Item1</li>
			<li onClick="showdiv('itemdeux')">Item2</li>
		</ul>
           </ul>
       </div>
    </div>
</div>

J'ai lu sur un topic qu'il fallait juste prendre la collection document.getElementsByTagName('div') mais j'avoue que je n'ai pas bien compris

Quelqu'un pourrait-il m'aider ?

[E.Bzz]

Salut

J'ai lu sur un topic qu'il fallait juste prendre la collection document.getElementsByTagName('div') mais j'avoue que je n'ai pas bien compris

Qu'est-ce que tu ne comprends pas la dedans ?
document.getElementsByTagName('div') te retourne un tableau d'éléments.
Il suffit de la parcourir ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('truc').getElementsByTagName('div')

te sort (sans risque) la liste des div contenus dans "truc" ...

A+

[baggie]

Merci E.Bzz pour ta réponse.

Ce que je ne comprends pas, c'est quoi écrire exactement pour cacher les divs puisque :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('elemliste').getElementsByTagName('div').style.display = "none";

ne fonctionne pas, alors que moi ça me paraît on ne peut plus logique

EDIT : un while pour faire un parcours sur chaque div ?

EDIT 2 : j'ai vu que dans mon code au-dessus (premier post) j'avais oublié les div à afficher quand on passe sur l'item correspondant, donc en gros sous le <div> contenant mes item, j'ai tous les autres <div> les uns sous les autres.

[E.Bzz]

ne fonctionne pas, alors que moi ça me paraît on ne peut plus logique

Comme quoi, toute logique est relative

document.getElementsByTagName('div') te retourne un tableau d'éléments.

Tableau c'est dans le sens Array(), et pas <table>.
Donc pour accéder à un des éléments du tableau, il faut un indice

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('elemliste').getElementsByTagName('div')[i].style.display = "none";

i étant incrémenté par ta boucle (de 0 à document.getElementById('elemliste').getElementsByTagName('div').length).

Sur le principe, il te suffit de tout passer en display="none" dans ta boucle, puis de passer explicitement le display de celui que tu veux afficher (dont tu auras pris soins de passer l'id en paramètre de ta fonction) à "block".

A+

[baggie]

Merci pour ton aide, ça fonctionne parfaitement !

(suffit juste de bien savoir où placer ses div pour ne pas tous les cacher )