Javascript| Aff/caché une div au même endroit

Fermé

Crabs - 14 juil. 2010 à 19:15
Crabs - 15 juil. 2010 à 18:40

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.

A voir également:

Javascript| Aff/caché une div au même endroit
Appel caché - Guide
Telecharger javascript - Télécharger - Langages
Copie caché - Guide
Remettre l'ecran a l'endroit - Guide
Cacher une conversation whatsapp - Guide

2 réponses

Réponse 1 / 2

Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
15 juil. 2010 à 15:19

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 ;)

Réponse 2 / 2

Crabs
15 juil. 2010 à 18:40

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.

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Comment trouver les fichier cachés ?

retrouver un texte caché dans une image jpg

Discussions similaires

Newsletters