Javascript| Aff/caché une div au même endroit
Crabs
-
Crabs -
Crabs -
Bonjour,
J'aurais besoin d'aide pour un script.
J'ai une <MAP> qui contient des area. Chacune contient un href dans lequel je déclenche le javascript.
J'aimerais que quand je clique sur une area de ma map cela m'affiche un texte à côté. Et quand je clique sur une autre area un autre texte s'affiche à la même place que le précédent et le remplace.
Jusqu'à présent j'utilisais ce script:
<script>
function afficher(id)
{
if(document.getElementById(id).style.display == "none")
{ document.getElementById(id).style.display = "block" }
else
{ document.getElementById(id).style.display = "none" }
}
</script>
Et autour de l'élément que je veux cacher/afficher:
<div id="element1" style="display: none;">
<p> texte cacher </p></div>
<div id="element2" style="display: none;">
<p> texte cacher2 </p></div>
Seulement, il ne vas pas pour ce que je veut faire. Car il ne remplace pas le texte1 mais ajoute le texte2 dessous.
Je voudrais que quand on clique sur "lien 1" :
texte 1 s'affiche.
Si on re-clique sur ce lien 1
texte 1 disparait.
Si on clique sur un autre lien 2:
texte 2 s'affiche à la meme place que le texte 1.
J'espère être assez clair pour que vous puissiez m'aider.
Merci.
Crabs.
J'aurais besoin d'aide pour un script.
J'ai une <MAP> qui contient des area. Chacune contient un href dans lequel je déclenche le javascript.
J'aimerais que quand je clique sur une area de ma map cela m'affiche un texte à côté. Et quand je clique sur une autre area un autre texte s'affiche à la même place que le précédent et le remplace.
Jusqu'à présent j'utilisais ce script:
<script>
function afficher(id)
{
if(document.getElementById(id).style.display == "none")
{ document.getElementById(id).style.display = "block" }
else
{ document.getElementById(id).style.display = "none" }
}
</script>
Et autour de l'élément que je veux cacher/afficher:
<div id="element1" style="display: none;">
<p> texte cacher </p></div>
<div id="element2" style="display: none;">
<p> texte cacher2 </p></div>
Seulement, il ne vas pas pour ce que je veut faire. Car il ne remplace pas le texte1 mais ajoute le texte2 dessous.
Je voudrais que quand on clique sur "lien 1" :
texte 1 s'affiche.
Si on re-clique sur ce lien 1
texte 1 disparait.
Si on clique sur un autre lien 2:
texte 2 s'affiche à la meme place que le texte 1.
J'espère être assez clair pour que vous puissiez m'aider.
Merci.
Crabs.
2 réponses
-
Bonjour,
voila une petite fonction javascript qui pourrait t'aider :
var id_element_courant = null ; function montrer_cacher_elements(id_element) { element = document.getElementById(id_element) ; element_courant = document.getElementById(id_element_courant) ; if(id_element_courant == id_element) // cacher l'element si on reclique { element.style.display = 'none' ; id_element_courant = null ; } else { element_courant.style.display = 'none' ; element.style.display = 'block' ; id_element_courant = id_element ; } }
il suffit de l'appeler avec l'id du div contenant ton texte :)
En espérant que ça t'aide ;)
-
Salut,
Merci pour ta réponse.
Voilà ce que j'ai fait:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> var id_element_courant = null ; function montrer_cacher_elements(id_element) { element = document.getElementById(id_element) ; element_courant = document.getElementById(id_element_courant) ; if(id_element_courant == id_element) // cacher l'element si on reclique { element.style.display = 'none' ; id_element_courant = null ; } else { element_courant.style.display = 'none' ; element.style.display = 'block' ; id_element_courant = id_element ; } } </script> </head> <body> <a href="javascript:montrer_cacher_elements('id_element');"> Clik 1</a> <div id="id_element" style="display:none"> <p>Liste 1</p> <ul><li> Element 1</li> <li> Element 1</li></ul></div> </body> </html>
Mais ça ne fonctionne pas. Est-ce que j'ai fait une erreur dans l'interprétation de ton code? :s
Je suis très très nul en javascript XD.
