Cache d'une liste déroulante lors du clique sur une autre (HTML)
coastlyne
-
coastlyne -
coastlyne -
Bonjour,
J'ai créé en Html 2 boutons (fruits et légumes) qui lors du clique de l'un une liste déroulante apparaît et pareil pour l'autre.
Cependant j'aimerais trouver un système permettant au clique de l'un ou l'autre, que la liste de l'autre se ré-enroule:
<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>
<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>
Merci d'avance.
J'ai créé en Html 2 boutons (fruits et légumes) qui lors du clique de l'un une liste déroulante apparaît et pareil pour l'autre.
Cependant j'aimerais trouver un système permettant au clique de l'un ou l'autre, que la liste de l'autre se ré-enroule:
<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>
<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>
Merci d'avance.
A voir également:
- Cache d'une liste déroulante lors du clique sur une autre (HTML)
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Copie caché - Guide
- Numéro caché - Guide
- Comment cacher sa liste d'amis sur facebook - Guide
3 réponses
Bonjour, le mieux pour ça est d'utiliser le DOM JavaScript.
Le DOM JavaScript permet de cibler un élément de la page pour changer ses paramètres, son contenu ou son état.
L'état se réfère à l'utilisation principale de JavaScript pour les pages web: La programmation dite événementielle.
Un événement est une action (souvent de l'utilisateur) qui va provoquer quelque chose:
appuyer un bouton, dérouler une liste, déplacer la souris... etc
Pour le principe il faut dire : quand j'appuie sur cette liste il faut masquer(je veut dire enlever la partie déroulante) l'autre.
Si celle ci n'est pas déroulée il ne se passera rien bien sûr.
Mettez ce script sur chaque bouton(le ciblage de la liste changera) et le tour est joué.
De cette façon vous avez votre résultat sans avoir de rechargement de page.
Le DOM JavaScript permet de cibler un élément de la page pour changer ses paramètres, son contenu ou son état.
L'état se réfère à l'utilisation principale de JavaScript pour les pages web: La programmation dite événementielle.
Un événement est une action (souvent de l'utilisateur) qui va provoquer quelque chose:
appuyer un bouton, dérouler une liste, déplacer la souris... etc
Pour le principe il faut dire : quand j'appuie sur cette liste il faut masquer(je veut dire enlever la partie déroulante) l'autre.
Si celle ci n'est pas déroulée il ne se passera rien bien sûr.
Mettez ce script sur chaque bouton(le ciblage de la liste changera) et le tour est joué.
De cette façon vous avez votre résultat sans avoir de rechargement de page.
