Niveau
..........
En rapport...

Développer une liste

Afin d'éviter d'avoir des listes à rallonge il peut dans certains cas être utile de n'afficher que les parties importantes d'une liste et de ne développer les détails que si l'utilisateur clic sur le titre en question.
Voici un code qui vous permettra de le faire:

html4strict
<ul>
<li onclick="document.getElementById('maListe').style.display=(document.getElementById('maListe').style.display=='none')?'':'none';" > Liste 1
		<ul id="maListe" style="display:none">
			<li>1</li>
			<li>2</li>
		</ul>
	</li>
</ul>

-Nous avons attribuer un id nommé “c” à la liste que nous ne voulons pas voir tous le temps.
-Le titre “liste 1” permettra lorsque l'on clique dessus d'afficher cette fameuse liste masquée.
-Enfin le code suivant:

javascript
document.getElementById('c').style.display=(document.getElementById('c').style.display=='none')?'':'none';

Il s'agit d'un If court qui permet à la foi de vérifier la valeur de “display” pour l”objet dont l'id est “c” (getElementById('c').style.display) mais aussi de la modifier en conséquence. Pour plus d'information sur les if raccourcis rendez-vous ici.

Le résultat

Pour plus d'esthétique vous pouvez rajouter le css suivant juste avant “onclick” :
style=“cursor:pointer”