1. Accueil
  2. Codes-Sources
  3. Javascript / DHTML

Masquer/ afficher dynamiquement une div (ou autre element) en Js [Résolu]

Signaler
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
 -
cs_kopax
Messages postés
15
Date d'inscription
dimanche 16 mai 2004
Statut
Membre
Dernière intervention
2 mai 2012
 -
bonjour

je dois être une buse finis, parce que je n'arrive pas a masquer/afficher dynamiquement une div en JS.

soit je la rend visible et je peut la masquer mais impossible de la rendre de nouveau visible

soit elle est masqué et là je n'arrive a rien. j'ai cherché un peut partout sur le net mais je vois pas ou est mon erreur !

exemple HTML

code JS

document.getElementById("iddiv").style.display = 'show';

ou

document.getElementById("iddiv").visibility = 'show'

rien n'y fait

merci de votre aide
Afficher la suite
A voir également:

16 réponses

Réponse 1 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
avec en JS : document.getElementById('iddiv').style.visibility = "visible"; //pour rendre visible

soit un

avec en JS : document.getElementById('iddiv').style.display = "block"; //pour afficher

a++

Si la réponse vous convient, pensez : <gras>Réponse acceptée !
Réponse 2 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
en remplacant

document.getElementById("iddiv").style.display = 'show';

par

document.getElementById("iddiv").style.display = '';

ça marche sous ff mais pas ie
Réponse 3 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
Salut,

document.getElementById("iddiv").style.display = ' block '; //affiche

Ou

document.getElementById("iddiv").<gras>style.visibility = 'visible'; //affiche

a++

Si la réponse vous convient, pensez : <gras>Réponse acceptée !
Réponse 4 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
re,

block affiche ?

et pour cacher via <gras>style.visibility ?

merci
Réponse 5 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
en fait display si tu le met a block, ça affiche et si tu le met a none ça le cache !

et le visibility, c'est différent, si tu le met a hidden, le div se cache mais prend toujours de la place et si tu le met a visible, le div est visible !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 6 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
ok je comprend mieux

soit je fais un

avec en JS : <gras>style.visibility

soit un

avec en JS : style.display

par contre FF ça roule, Ie ma div reste invisible, il ya une particularité pour IE ?
Réponse 7 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
ok

j'ai compris pourquoi ie " n'affichait pas"

en fait quand je met des alert je vois ma div, ie met juste du temp pour l'afficher alors que sous FF c'et immediat !

là je comprend pas
Réponse 8 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
donc ton problème est résolu donc tu peus mettre les réponses qui t'ont aidés en réponses acceptées !

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 9 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
si je met un

alert('!'); juste apres avoir rendu ma div visible, je vois tout bien !

document.getElementById('iddiv').<gras>style.visibility = "visible";
alert('!');

si je retir le alert je ne vois plus rien !

je comprend pas
Réponse 10 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
moi non plus, il faut poster dans la rubrique problème de compatibilité...

Si les réponses vous conviennent, pensez :Réponse acceptée !
Réponse 11 / 16
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 30
Bonjour,
en javascript tu joue avec style.visibility
et en html avec style display
c'est l'un ou l'autre ( ou les 2 mais là ça ne sert pas à grand chose )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 12 / 16
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
 25
A ba oui dans les exemple que je t'ai donné, j'avais mis le display en html avec le display en javascript ...
et le visibility html avec le visibility javascript !

lol

a++

Si la réponse vous convient, pensez : Réponse acceptée !
Réponse 13 / 16
Messages postés
13619
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
 30
c'est probablement ( ou peut-être ) pas le cas de rhan_659 ?
qu'il nous redonne tout, là où il en est...
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Réponse 14 / 16
Messages postés
15
Date d'inscription
dimanche 16 mai 2004
Statut
Membre
Dernière intervention
2 mai 2012
Bonjour, ce code m'intéresse, je cherche un tuto pour faire la même chose.

J'aimerai que suite à un clic ça affiche, et suite à un autre clic ça le cache (et pas que ça prenne de l'espace).

Dommage que la personne n'a pas donné de nouvelle après résolution de ses problèmes.


J'aimerai aussi savoir si il est possible de modifié le texte du lien en question suite à l'affichage/masquage de la DIV.

par exemple
Si DIV pas affiché le liens est (+)info
Si DIV affiché le liens est (-)info.

Sinon à quoi ressemble le CSS? existe il encore des incompatibilité avec IE au jour d'aujourd'hui?


J'espère ne pas avoir déterrer une antiquité et que les gens aillant participé à ce thread son encore de se monde :P
Réponse 15 / 16
Messages postés
85
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
30 juin 2011
bonjour

je m'aperçois avec horreur que j'ai oublié ce post, toute mes excuses.

voila le code

function isShow(element){
if(element "undefined" || element null){return true}
if (element.getAttribute('style') "undefined" || element.getAttribute('style') null || element.getAttribute('style') == ""){return true;}
var etat = false;
if(element.getAttribute('style').toLowerCase().indexOf('visibility') >0){etat true;}
else if (element.getAttribute('style').toLowerCase().indexOf('block') >0){etat true;}

return etat;
}


function show(element,show, style){
if(element "undefined" || element null){return;}
if(show"undefined" || show null){return;}
if(show !true){show false;}else{show = true;}
if(style"undefined" || style null || style == ""){style = "";}

if (element.getAttribute('style') "undefined" || element.getAttribute('style') null || element.getAttribute('style') == ""){
if(style == ""){return;}
switch(style.toLowerCase()){
case 'v':
case 'visible':
case 'visibility':
if (show == true){
element.style.visibility = "visible";
}else{
element.style.visibility = "hidden";
}
break;
case 'd':
case 'disp':
case 'display':
if (show == true){
element.style.display = "block";
}else{
element.style.display = "none";
}
break;
}
}else{
if(element.getAttribute('style').toLowerCase().indexOf('visibility') >= 0){
if (show == true){
element.style.visibility = "visible";
}else{
element.style.visibility = "hidden";
}
}else if(element.getAttribute('style').toLowerCase().indexOf('display') >= 0){
if (show == true){
element.style.display = "block";
}else{
element.style.display = "none";
}
}
}
}
Réponse 16 / 16
Messages postés
15
Date d'inscription
dimanche 16 mai 2004
Statut
Membre
Dernière intervention
2 mai 2012
Mrci beaucoup, j'ai de la chance on dirai.

Je comprend pas grand choses, je ne fais que du php et pas de javascript (mais alors pas du tout)
Pourquoi j'ai l'impression que y a du double?

Dans le meilleur des cas dans le meilleur des mondes, serai-il possible de indenté le code pour qu'il puisse être modifié et améliorer, et de le posté dans la librairie de code?


(Ça peut être intéressant, on vois se code souvent et pourtant aucun tuto, code facilement trouvable sur google, pour dire je suis venu à chercher ici ^-^)

Merci bien dans tout les cas !
Répondre Posez votre question