Afficher et masquer une 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>
<a href="javascript:visibilite('divid');">afficher/masquer</a>
<div id="divid" style="display:none;">contenu</div>

[update ici]

20 Commentaires »

  1. clement

    04-07-2006 14:07

    Je viens de trouver ton site en faisant une recherche pour ce genre de code, et franchement une seule chose à dire : BRAVO !
    Le code est court, propre, utilisable très facilement pour n div, efficace… Rien à dire !
    Ca change de tous les codes parfois très très lourds qu’on trouve habituellement :)

  2. Rafiki

    20-08-2006 15:08

    Parfait, 20/20, A, que dire de plus ?

  3. Christian Lefèvre

    14-09-2006 18:09

    Hé bien, moi aussi je dis BRAVO. Voilà 6 heures que je cherche sur le net ce type de script. Dommage, je n’utilisais pas les bons mots clé.

    Ça marche vraiment SUPER et en plus on peut utiliser ça partout. Une fonction vraiment indispensable.

    Merci beaucoup !

  4. Mr Dev.

    19-10-2006 10:10

    Note:
    On peut faire qqc de similaire en remplaçant display par visibility et none par hidden (dans mon cas c’était mieux).

    + d’infos ici :
    http://developpeur.journaldunet.com/tutoriel/css/060718-difference-visibility-hidden-display-none.shtml

  5. etienne

    08-11-2006 15:11

    excellent ce petit bout de code qui fonctionne a merveille. comment faire pour masquer automatiquement une DIV lorsqu’on en ouvre une autre ? merci !

  6. Alexandre

    11-12-2006 18:12

    Super merci beaucoup ca m’a ete d’une tres grand utilitée ^^

    Bravo ;)

  7. Romu

    20-12-2006 13:12

    Merci beaucoup pour ce script. Facile a mettre en place et fonctionne parfaitement !!

  8. Mehdi AYACHE

    25-01-2007 05:01

    J’ai vu des script de pas moins de 30 lignes pour réaliser le masquage/affichage d’un élement unique (ID) mais jamais vu un code pareil !
    bravo !
    j’espère que la suite sera de changer l’élement cliquable ! par exemple, quand le calque sera afficher le texte devient “masquer” et vice-versa ! avec du texte ou un bouton …

  9. Younes

    11-02-2007 23:02

    Je dis Bravon
    mais une demande si possible :
    je veux au lieu d ‘aficher ‘afficher/masquer’, afficher ‘Afficher’ si la div “divid” est cahcée et ‘Masquer’ si la div “divid” est affichée (Comme le + & -).
    Merci

  10. Jérôme

    12-02-2007 17:02

    J’ai fait une version avec le texte du lien qui change : http://blocnotes.jemenvol.net/22.afficher-et-masquer-une-div-2/

  11. ElSegador66

    15-05-2007 11:05

    Bonjour! Merci pour le code, c’est bien cool.
    Voila, je l’ai applique a mon cas, et c’est presque nickel. J’ai plusieurs div dans ma page mais je ne voudrais en avori qu’une d’active a la fois.
    Donc si je clique sur une div, celle-ci s’affiche mais les autres disparaissent. Que faut-il rajouter a ton code pour que cela marche?
    Merci d’avance et bonne continuation!

  12. Jérôme

    15-05-2007 12:05

    ElSegador66 > voir ici, un début de piste avait été donné :

    http://blocnotes.jemenvol.net/22.afficher-et-masquer-une-div-2/

  13. ElSegador66

    16-05-2007 02:05

    J’ai trouve le code ci-dessous qui fait ce que je veux, mais malheureusement il est plus complique que le tien et puis il y a cette histoire de tableau en dur. Comme je dois faire toutes les lettres de l’alphabet c’est un peu long meme si en copie-collant ca marche bien sur. Mais rendre le truc plus dynamique ce serait cool. Si vous une idee, n’hesitez pas!

    states=new Array()
    states[0]=”a”
    states[1]=”b”

    function hideAllExcept(elm) {
    for (var i = 0; i

    A 
    B 

    - aa
    - ab
    - ac

    - ba
    - bb

  14. La Quiche

    21-05-2007 16:05

    Bonjour
    moi aussi je suis a la recherche d’un script exactement pareil mais qui ferme le div précédent avant d’ouvrir le deuxieme, pour n’avoir qu’un seul div ouvert en meme temps exactement comme ElSegador66.
    le script du lien est bien mais il pert l’enorme avantage de celui la, sa legereté.
    j’attend une ptite reponse merci

  15. cgraph

    25-07-2007 21:07

    Le script m’a causé des problème dans Firefox et Netscape. Le menu en javascript, lui aussi, n’apparaît plus et le contenu de la page est décalé vers le bas à gauche!?!

    Avez-vous une idée?

    cg

  16. Jérôme

    26-07-2007 09:07

    cgraph > une url où l’on pourrait voir le problème ?

  17. Pierre

    12-08-2007 20:08

    Génial, enfin un code simple et clair.
    J’en ai trouvé d’autre mais il y avait un problème lorsque les divs sont les unes sur les autres, les objets ne remontaient pas pour combler le vide …
    Merci pour ton code !

  18. Fly

    22-08-2007 21:08

    Super script, je suis tombé dessus en fouinant sur google, merci ! ! !

    Je voudrais le modifier pour intégrer cette fonction : mettre plusieurs liens dans la même page web et faire de sorte que lorsque je clique sur un lien cela ferme le div qui était déjà ouvert avant d’ouvrir un nouveau div.

    Pouvez-vous m’aider svp ? Merci !

  19. Alex

    27-01-2008 16:01

    Merci - c’est génial !!!!

  20. Thibs

    10-06-2008 17:06

    Merci c’est très pratique!

    Petite remarque syntaxique … est-ce que le contraire de la propriété “none” de display n’est pas “block” ?

    Le résultat est le même mais je croiq qu’au niveau de la syntaxe c’est plus juste

Comment RSS · TrackBack URI

Laisser un commentaire

Name: (Required)

E-mail: (Required)

Website:

Comment: