Cacher les <dd> d'une liste de definition au clic sur un <dt

Bonjour,
Tout est dans le titre, j'ai un menu qui ressemble à peu pres à ça :

		<dl>
    		<dt><a href="">Pharaon</dt>
			<dd><a href="">Attributs</a></dd>
			<dd><a href="">Fonction</a></dd>
			<dd><a href="">Le Vizir</a></dd>
			<dd><a href="">Nature</a></dd>
			<dd><a href="">Pharaon</a></dd>
			<dd><a href="">Titulature</a></dd>
		</dl>

Je voudrais qu'en cliquant sur pharaon, ça cacher les liens attributs, fonction, etc juqu'a titulature...

Mais je veux que pharaon s'affiche encore...

Merci d'avance, je suis un grand debutant en javascript, donc j'imagine que la solution est simple ?

Bonjour,

Je vois bien ce genre de fonction lancée au clic sur le lien (onclick), en passant le pointeur this à la fonction :
Note : Ce script est écrit en live et est donc sans garantie de fonctionnement. Par contre, l'idée générale y est.

function clicDt (lien) {
var tab = lien.parentNode.parentNode.getElementsByTagName('*');
var on = false;
for (var j=0; j < tab.length; j++) {
if (tab[j]) {
if (tab[j].tagName.toLowerCase()=='dt') {
on = false;
if (tab[j].firstChild.nodeValue==lien.nodeValue) on = true;
}

if (tab[j].tagName.toLowerCase()=='dd' && on) tab[j].style.display = 'none';
}}

}

Voici mon idée : on recherche dans l'arborescence le <dt> qui a été cliqué (j'imagine que tu as plusieurs <dt> et que tu ne veux masquer que les <dd> qui y sont rattachés).
Pour le trouver, on vérifie le texte du lien. Mais attention, ça ne marchera pas si tu mets du HTML genre <strong> dans ton lien.
Une fois le <dt> trouvé, on masque tous les <dd> suivants, jusqu'à ce qu'on retombe sur un <dt> ou qu'on soit arrivé à la fin de la liste.

ça marche super, et en mettant "return false" dans mes liens, ça reste accessible pour les navigateurs bloquant javascript !

Juste une petite chose, comment faire pour que le menu, une fois caché, réapparaisse lors du clic sur le <dt> encore une fois ?

Merci à toi

Ah, pour ça, pas trop de problèmes

remplace :
tab[j].style.display = 'none';
par :
tab[j].style.display = (tab[j].style.display=='block'? 'none':'block');
ou bien :
tab[j].style.display = (tab[j].style.display=='none'? 'block':'none');

selon si les liens sont affichés ou masqués par défaut. Il peut arriver que tu aies besoin de deux clics pour effectuer le premier changement, dans ce cas, essaie l'autre.