11548 sujets

JavaScript, DOM et API Web HTML5

Afficher / masquer une liste avec CSS et JS

bonjour,

j'aimerais avoir une liste masquée et lorsque l'on clique sur un lien cette liste apparaisse. J'ai tenté quelque chose mais qui ne fonctionne pas. Si quelqu'un pourrait m'aider ce serai tres gentil Smiley smile

le JS


function applyClass(oElement,sCSSClass)

{
     oElement.className = sCSSClass;

}


le html

<a onclick='applyClass(this,'affiche')' href=''>Afficher la liste</a>

<ul class='masque'>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>


le css

.affiche{

display:block;
}
.masque {
display:none;
}

Modifié par gforce (29 May 2006 - 17:36)
Administrateur
est-ce que tu as déjà étudié la piste getElementById ?


<ul id="truc" style="display:none">
<li>pom</li>
<li>pom</li>
<li>pom</li>
</ul>

<a href="" onclick="document.getElementById('truc').display='block';">bobby!</a>

Modifié par dew (29 May 2006 - 17:38)
dew a écrit :
est-ce que tu as déjà étudié la piste getElementById ?


<ul id="truc" style="display:none">
<li>pom</li>
<li>pom</li>
<li>pom</li>
</ul>

<a href="" onclick="document.getElementById('truc').display='block';">bobby!</a>

oui bien sur mais la liste étant générée dynamiquement je dois utiliser des class, si non j'aurais plusieur id identique
a écrit :

oui bien sur mais la liste étant générée dynamiquement je dois utiliser des class, si non j'aurais plusieur id identique

IL faudrait pouvoir t'arranger pour avoir des id différents à chaque nouvelle liste générée. Ou alors, si tu génères cette liste via js, garde le noeud DOM de la liste dans une variable en mémoire.
dew a écrit :
est-ce que tu as déjà étudié la piste getElementById ?


<ul id="truc" style="display:none">
<li>pom</li>
<li>pom</li>
<li>pom</li>
</ul>

<a href="" onclick="document.getElementById('truc').display='block';">bobby!</a>


cela ne fonctionne pas, tu as testé?
j'ai essayé ceci

function ElementDisplay(Element){
	if (document.getElementById(Element).style.display == "none") {
		document.getElementById(Element).style.display="block";
	}else{
		document.getElementById(Element).style.display="none";
	}
}


mais ca ne fonctionne pas. Y aurait il une erreur de syntax ? Smiley murf
Sujet clos
Aller à