Faire afficher du texte au clique d'un autre

Résolu/Fermé
coastlyne - 6 mars 2013 à 15:22
duweb Messages postés 352 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 6 mars 2014 - 6 mars 2013 à 16:45
Bonjour,

J'aimerais faire une page html qui se composera de 2 liens qui font afficher chacun, d'autres liens. Pour cela j'ai commencé un code mais je n'arrive pas à faire afficher plusieurs liens pour le 1er.
Par exemple, j'ai 2 catégories Légumes et fruits sur ma page. Lors du clique sur l'un des 2 j'ai une liste qui s'affiche (soit légumes, soit fruits) qui seront eux aussi par la suite des liens:
<html>

<b><a href="" onclick="javascript:visibilite('id_div_1'); return false;">Légumes</a></b><br />
<div id="id_div_1" style="display:none;">harricots</div>
<div id="id_div_2" style="display:none;">tomates</div>
<script>function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
<b>Fruits</b>
</html>

D'avance merci.

4 réponses

Chocobo_tofu1 Messages postés 162 Date d'inscription lundi 1 mars 2010 Statut Membre Dernière intervention 10 juillet 2014 362
6 mars 2013 à 16:00
je ne sais pas si c'est ce que tu cherches à obtenir, mais à défaut d'avoir plus d'explications, voilà un bout de code que tu pourrais tester:

<html>
<head>
<script>
function visibilite(thingId)
{
var targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{targetElement.style.display = "" ;}
else {targetElement.style.display = "none" ;}
}
</script>
</head>
<body>
<div>
<b>
<a href="javascript:visibilite('id_div_1');">Légumes</a>
</b>
</div>
<div id="id_div_1" style="display:none;">
<a href="http://www.monsite.com/haricots" >haricots</a>
<br/>
<a href="http://www.monsite.com/courgettes" >courgettes</a>
</div>
<br/>
<div>
<b>
<a href="javascript:visibilite('id_div_2') ;">
Fruits
</a>
</b>
</div>
<br/>
<div id="id_div_2" style="display:none;">
<a href="http://www.monsite.com/kiwi" >kiwi</a>
<br/>
<a href="http://www.monsite.com/bananes" >bananes</a>
</div>

</body>
</html>
0
Merci oui c'est tout à fait ce que je recherche !!

Juste une précision de plus :
Est-ce qu'il serait possible que lorsqu'on choisit légumes (la liste se déroule) mais si on choisit fruits juste après, la liste de légumes se replit quand la liste de fruits se déroule?

Désolé je sais pas si je suis très claire...

Merci beaucoup en tout cas
0
Chocobo_tofu1 Messages postés 162 Date d'inscription lundi 1 mars 2010 Statut Membre Dernière intervention 10 juillet 2014 362
6 mars 2013 à 16:44
pour cela, je t'invite à consulter cette page:
https://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html

PS: peux-tu changer le statut de ce sujet en résolu car la question de ton topic a été traité.
0
duweb Messages postés 352 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 6 mars 2014 72
6 mars 2013 à 16:45
0