Fonction afficher / masquer

Résolu
Signaler
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour,

Sur mon site, j'aimerai pouvoir afficher ou "enlever" un texte
quand l'utilisateur clique sur le titre de ce texte j'ai trouvé une
fonction sur le net qui marche bien pour l'affichage :
/*function montre_div(nom_div) {
document.getElementById(nom_div).style.display="block";
}*/

J'ai voulu modifier la fonction afin que quand l'utilisateur
reclique sur le titre du texte le texte puisse disparaitre, mais ça ne
marche pas! Quelqu'un pourrait-il m'aider? ! Voilà ma fonction

<style type="text/css">
li {
list-style-type:none;
}
#li_1 {
display:none;
}
</style>
<script type="text/javascript">
function montre_div(nom_div) {
if(document.getElementById(nom_div).style.display="none")
document.getElementById(nom_div).style.display="block";
else{document.getElementById(nom_div).style.display="none";}
}
</script>

16 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
oui, oui... mais le reste ?

<style type= "text/css">
li {
 list-style-type:none;
}
#li_1 {
 display:none;
}
</style>
<script type="text/javascript">
function montre_div(nom_div)
{ alert(document.getElementById(nom_div).style.display);
    if(document.getElementById(nom_div).style.display=="none")
                document.getElementById(nom_div).style.display="block";
    else    {    document.getElementById(nom_div).style.display="none";}
}
</script>
    <li onclick="montre_div('li_1');">
        titre
    </li>
    <li id ="li_1">src</li>

sous réserve de ce qu génère le PHP ! qui peut être faux !
j'ai remplacé pour les tests, par une valeur directe.

[mon Site][M'écrire]Bul

et quand tu auras pigé  tu remplaces =="none" par !="block"
par exemple puisqu'au moins 3 solutions....
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
bonjour,

c'est bien de nous donner la fonction,
elle doit d'ailleurs fonctionner pour afficher/cacher
mais... où est le div ? comment appelle-t-on cette fonction ? quand ?
je veux bien taper ce qu'il faut même sit ce serait plus sympa de
nous le donner.... non ?, mais en plus, cela correspondra-t-il a ce que tu as ?
et, mon foie, autant l'avoir plutôt que de faire pour rien.
et pas 26658975 lignes ! le div + l'appel : 5 lignes quoi... et encore...
mais met tout et en forme si tu veux bien, que nous ne soyons pas obligé de le faire

Cordialement          [mon Site] [M'écrire] Bul         
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009

Donc la fonction est ici-même :
<script type="text/javascript">
function montre_div(nom_div) {
if(document.getElementById(nom_div).style.display="none")
document.getElementById(nom_div).style.display="block";
else{document.getElementById(nom_div).style.display="none";}
}
</script>

Voici l'appel à ma foncion :
<li onclick="montre_div('li_1');"><?php echo $titre; ?></li>
<li id="li_1"><?php lire("$src");?></li>

Voilà j'espère que c'est assez clair.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
y'aurait pas du php là ?
et comment on devine ce que ça génère ?

bon ici, ce n'est pas important ( peut-être !?! )
mais si tu avais d'autres soucis, c'est la page html résultante
       qu'il faut mettre ! pas le php... on n'est pas devin.

 if(document.getElementById(nom_div).style.display=="none")

c'est un test, = une affectation.

et... ça marche si le css n'est pas présent :
le li_1 est caché au départ, et son style.display n'est pas = none !

soit tu testes "le style actuel"  pour la balise,
soit tu lui met style="display:none",
soit tu testes !="block"

          [mon Site] [M'écrire] Bul         
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009

Euh, j'ai pas très bien compris, enfin ce que j'ai compris c'est qu'il faut que j'enlève le CSS? Et ensuite ma fonction devient :
<script type="text/javascript">
function montre_div(nom_div) {
if(document.getElementById(nom_div).style.display=="none")
document.getElementById(nom_div).style.display="block";
else{document.getElementById(nom_div).style.display="none";}
}
</script>

C'est ça????
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
à priori la fonction serait ok.. mais :
tu testes le style.display de la balise li_1.
quel est-il ??? indéfini ( la 1ère fois )
pas "none" ou "block", en tous cas : tu n'as rien mis
de tel dans le style de la balise.

sans le ccs, la balise est affichée.
la 1ère fois que tu appelles la fonction, style.display
n'est pas = "none", donc on le met à "none"

avec le css, la balise est cachée,
la 1ère fois que tu appelles la fonction, style.display
n'est pas = "none", donc on le met à "none"

les autres appels, seront ok

3 possibilités de rectifier :
soit tu testes "le style actuel" (currentStyle de mémoire
mais pas sûr que IE et FF soient d'accord ! ) pour la balise,
soit tu met style="display:none" à la balise
soit tu testes !="block"

css ou pas.

est-ce plus clair ?
mais.. teste, tu verras...
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
enfin... quand je disais : "3 possibilités de rectifier"
c'était celles qui me sont venues sur le coup, doit bien y en avoir 356987 autres
[mon Site][M'écrire]Bul
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009

Ah non! je suis vraiment pomée là. Je comprends pas grand chose, au début , le style du display est bien à none vu qu'avec le CSS, on a :
<style type= "text/css">
li {
list-style-type:none;
}
#li_1 {
display:none;
}
</style>

Avec ceci, j'ai ma fonction :
<script type ="text/javascript">
function montre_div(nom_div) {
if(document.getElementById(nom_div).style.display=="none")
document.getElementById(nom_div).style.display="block";
else{document.getElementById(nom_div).style.display="none";}
}
</script>

Et l'appel à la fonction est comme tout à l'heure :
<li onclick="montre_div('li_1');"><?php echo $titre; ?>

J'ai essayé le display:none que j'ai ajouté à ma balise mas ça efface le Afficher que j'ai avant.
Est-ce que vous pourriez me modifier le code, s'il vous plait parce que je patauge un peu.

?></li>
<li id="li_1"><?php lire("$src");?></li>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
>>style du display est bien à none vu qu'avec le CSS, on a :
ben non !
le css dans la balise style ce n'est pas le style de la balise !

mais essaye donc,
ta fonction + <style> + le html

tu verras que tu es obligé de cliqer 2 fois pour cacher, la 1ère fois.

fais donc un alert(document.getElementById(nom_div).style.display)
en tête de la fonction.

          [mon Site] [M'écrire] Bul         
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009

Je dois vraiment coder comme un pied! Mon alert, ne fonctionne même pas.
Ma fonction doit bien ressembler à ça :
<script type="text/javascript">
function montre_div(nom_div) {
alert(document.getElementById(nom_div).style.display);
if(document.getElementById(nom_div).style=="display:none")
document.getElementById(nom_div).style.display="block";
else{document.getElementById(nom_div).style.display="none";
}
</script>
Messages postés
58
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
15 décembre 2009

AAHHHHHHH ça marche!
Pour le code c'est OK! Si j'ai bien compris, au début on a rien dans le display donc, il passe à none et c'est à partir de là une fois qu'on reclique dessus qu'il passe à block?!
Faut que je sois sure d'avoir bien compris.
Messages postés
1797
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 novembre 2021
139
bonjour

j'en ai aussi une possibilite si on part du principe que au de part le style = none on pourait garder la fonction tel quel et rajouter une variablede teste pour le demmarage de la fonction et la on pourait garder le css ca donnerait ca

var test = 1

<script type="text/javascript">
function montre_div(nom_div) {
if(test=1){
document.getElementById(nom_div).style.display="block";
test=2
}
else{
if(document.getElementById(nom_div).style.display=="none"){
document.getElementById(nom_div).style.display="block";
}
else{document.getElementById(nom_div).style.display="none";}
}
}
</script>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
ça doit fonctionner
mais pourquoi ajouter une variable ???

teste !="block" à la place de =="none" comme je te le proposais !

[mon Site][M'écrire]Bul
Messages postés
1797
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
21 novembre 2021
139
j'ajoute une variable pour le premier clic ensuite la variable se met a deux sa evite au depart de faire un if document.getElementById(nom_div).style.display=="none" qui si je ne me trompe pas et si on utilise une feuille de style me retournera une erreur lors du premier click car de memoire document.getElementById(nom_div).style me retourne tous ce qui se trouve dans la ba lise style et pas se qui se trouve dans le css plus besoin de mettre une balise <style='display:none'>et pas besoin aussi d'utilise currentStyle et getComputedStyle
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
12
répèterais-je ??  fait          if (document.getElementById(nom_div).style.display!="block")
   [mon Site][M'écrire] Bul    
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
comme dans 99,9% des cas le but est de
faire apparaître au premier click, la solution de TheBul3 reste la plus propre à savoir
//---------------------------
function
montre_div( nom_div){
  var Obj = document.getElementById(nom_div);

  if( Obj){
    if( Obj.style.display != "block")

      Obj.style.display="block";
    else{

      Obj.style.display="none";
    }
  }
}
...comme
cela pas besoin de se poser la question quant à savoir si on met un display:none dans la BALISE ou dans la partie
STYLE...

Ceci étant un nom plus approprié devrait être donnée à cette
fonction qui affiche/cache en alternace.
;O)