Déroulement d'un liste après un clic sur un lien

Bonjour,

Je voudrais réaliser une liste qui s'affiche après un clic sur son titre. Exemple :

Citation:

Fruits

Après avoir cliqué sur Fruits

Citation:

Fruits
- pommes
- poires
- abricots
- ...

Faut-il que je la réalise en javascript ? Si oui quelqu'un connait-il un site qui pourrait m'aider ?

Merci d'avance !
:salut:

Tu veux faire un menu, ou c'est juste dans une page ?
Tu peux imaginer un code cimple comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tests</title>
           <script type="text/javascript">
function displayDiv()
{
    if(idFruits.style.display == 'none')
        idFruits.style.display='block';
    else
        idFruits.style.display='none';
}
</script>
</head>
<body>
    <a href="javascript:displayDiv();">Fruits</a>
    <div id="idFruits" style="display:none;">
    -Banane<br />
    -Pommes<br />
    -Poires<br />
    </div>
</body>
</html>

Après biensur il faut de la mise en forme, mais en plus sur le but.

Merci beaucoup, c'est exactement ce que je voulais et le code est suffisamment simple pr ke je puisse le comprendre !:mrgreen:

:salut:

Parfait alors

Bonne continuation

Rebonjour,

J'aimerais savoir comment faire pour faire une liste sur pls niveaux. Exemple :
Après click sur Fruits :

Citation:

Fruits
- pommes
- poires
- abricots

Après click sur abricots :

Citation:

Fruits
- pommes
- poires
- abricots
- suisse
- italie

Voilà le code que j'ai essayé de réaliser mais qui ne fonctionne pas. Quelqu'un a-t'il une solution ou un conseil ?

Citation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tests</title>
<script type="text/javascript">
function displayDiv()
{
for(i=1; i<=3 ; i++)
{
if(idFruits+i+.style.display == 'none')
idFruits+i+.style.display='block';
else
idFruits+i+.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:displayDiv();">Fruits</a>
<div id="idFruits1" style="display:none;">
<ul>
<li>
<a href="javascript:displayDiv();">Pommes</a>
<div id="idFruits2" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv();">Poires</a>
<div id="idFruits3" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv();">Abricots</a>
<div id="idFruits4" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>

Merci d'avance,
:salut:

Juste déjà dans ton code il y a une erreur :
Code:

1 2 3 4 5 6 7 8 9 10 function displayDiv() { for(i=1; i<=3 ; i++) { if(document.getElementById("idFruits"+i).style.display == 'none') document.getElementById("idFruits"+i).style.display='block'; else document.getElementById("idFruits"+i).style.display='none'; } }
Mais tel quel tu cliquera sur n'importe quel liens, ça affichera ou ferra disparaitre tout.
Tu doit donnner un argument à la fonction pour savoir quel div cela concerne.

Tu peux faire comme ça par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function displayDiv(div)
{
        if(document.getElementById(div).style.display == 'none')
            document.getElementById(div).style.display='block';
       else
            document.getElementById(div).style.display='none';
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<body>
<a href="javascript:displayDiv('idFruits1');">Fruits</a>
<div id="idFruits1" style="display:none;">
<ul>
<li><a href="javascript:displayDiv('idFruits2');">Pommes</a>
    <div id="idFruits2" style="display:none;">
    <ul>
        <li>France</li>
        <li>Espagne</li>
        <li>...</li>
    </ul>
    </div> 
</li>
<li>
<a href="javascript:displayDiv('idFruits3');">Poires</a>
<div id="idFruits3" style="display:none;"> 
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv('idFruits4');">Abricots</a>
<div id="idFruits4" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div> 
</li>
</ul>
</div>
</body>