Faire disparaitre et apparaitre une div

Fermé
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 - 14 avril 2010 à 11:21
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 - 15 avril 2010 à 12:56
Bonjour,

Je cherche à crée un tableau qui disparait apparait suite à un clique sur un bouton.
Quand le tableau est masqué il ne dois plus prendre de place.

J'ai parcourus plusieurs forums mais n'a rien trouvé de convaincant, apparemment les mauvais script que j'ai trouvé pose des problèmes d'incompatibilités de navigateurs.

J'ai crus également comprendre que c'étais possible de le faire avec du css.
J'aimerai aussi que le bouton change si le tableau est affiché/masqué
(+)info -> (-)info -> (+)info.

Si quelqu'un qui à déjà fais cela aurai la gentillesse de partagé son code, je lui en serai gré.

Merci d'avance.
A voir également:

13 réponses

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 14/04/2010 à 13:09
Avec un code de ce type, c'est faisable:
le html (div+bouton) :
<input onclick="cache('aCacher')" type="submit" value="cacher"/> 
<div id="aCacher">qsdqsdqsd</div>    


Le javascript:
<script>
var bool=true;
function cache(id){
	if(bool==true){
		document.getElementById(id).style.display='none';
		bool=false;
	}else{
		document.getElementById(id).style.display='block';
		bool=true;
	}
}
</script>
11
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
15 avril 2010 à 12:15
De rien avec plaisir mais juste pour que tu le sache tu peux faire comme ceci:

<a id="but+" onclick="cache('aCacher','<?php echo $public_products_more_infos ?>')">x</a>


donc faire rentrer "$public_products_more_infos" dans la fonction javascript.

<script>
var bool=true;
function cache(id,txt){
	if(bool==true){
		document.getElementById(id).style.display='block';
		document.getElementById('but+').innerHTML = txt+"(-)";
		bool=false;
	}else{
		document.getElementById(id).style.display='none';
		document.getElementById('but+').innerHTML = txt+"(+)";
		bool=true;
	}
}
</script>

2
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
14 avril 2010 à 15:51
Merci de ton aide,

J'ai réussi à obtenir de l'aide sur un autre forum.
Le script qu'on ma donné est le suivant :

function cacheTable(btn) {
 
var tbl = document.getElementById("monTable");
 
if(tbl.style.display != 'none') {
tbl.style.display = 'none';
btn.value="Afficher tableau";
} else {
tbl.style.display = 'block';
btn.value="Cacher tableau";
}
 
}

<input type="button" ... onclick="cacheTable(this)" ... />


Bizarrement, vous faites tout les deux l'exemple avec un bouton.
J'ai essayé avec un alink, ca fonctionne.
Au départ je voulai un (+) infos pour affiché plus d'infos, alors il faudrai que ca sois caché de base.

J'ai essayé de modifié le code en vain.

Aussi en javascript (j'y connais rien) btn a l'air de parlé du input.
J'ai essayé quelque valeur pour le alink, et n'ai pas trouvé. (de manière à changer le texte (+) (-)
1
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
14 avril 2010 à 16:12
Normalement le onClick() tu dois pouvoir le mettre sur ce que tu veux, tu demandais un bouton. apres pour changer le texte d'un bouton tu peux faire comme ceci je reste sur mon code car c'est plus facile pour moi. et puis pour qu'il soit effacer a l'affichage de la page il faut rajouter un css display:none et inverser le code:

<input id="but+" onclick="cache('aCacher')" type="submit" value="+">
<div style="display:none;" id="aCacher">qsdqsdqsd</div>

<script>
var bool=true;
function cache(id){
	if(bool==true){
		document.getElementById(id).style.display='block';
		document.getElementById('but+').value="-";
		bool=false;
	}else{
		document.getElementById(id).style.display='none';
		document.getElementById('but+').value="+";
		bool=true;
	}
}
</script>

1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
15 avril 2010 à 12:56
Merci pour la précision supplémentaire, je la note ça aura son utilité certainement plus tard ;)
1
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
14 avril 2010 à 11:38
Salut, ben ça depend tu veux le faire en php, javascript...?

tu veux recharger la page ou non??
0
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
14 avril 2010 à 12:33
Sans recharger la page, sinon je l'aurai fais en php sans difficulté.

Mais j'ai cru comprendre que avec les feuille de style css, et un peu de javascript c'était possible.
0
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
14 avril 2010 à 17:45
Merci pour ton explication,

Désolé c'était un malentendu pour le bouton :P
Je voulais bien dire lien, je viens de me relire effectivement ça prête à confusion.

Je suis désolé, j'aimerai une solution pour modifié du texte, ici tu modifie un attribut.

En tout cas j'ai testé et ça fonctionne vraiment pas mal :P

Tu sais si il y a des problèmes d'incompatibilité avec les navigateurs pour un code similaire?
0
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 14/04/2010 à 18:21
Moi je n'ai jamais eu de probleme d'incompatibilité avec du javascript, il faut jamais dire jamais, mais l'incompatibilité s'il y en a une seras plutôt au niveau du css associé je pense. quant tu dis:
"j'aimerai une solution pour modifié du texte, ici tu modifie un attribut. "

Tu parles bien du bouton? Oui effectivement on modifie l'attribut value de celui-ci, pour du texte dans un élément html il faut utiliser "innerHTML". Voila le même code avec un lien:

<a id="but+" onclick="cache('aCacher')">+</a>
<div style="display:none;" id="aCacher">qsdqsdqsd</div>
<script>
var bool=true;
function cache(id){
	if(bool==true){
		document.getElementById(id).style.display='block';
		document.getElementById('but+').innerHTML = "-";
		bool=false;
	}else{
		document.getElementById(id).style.display='none';
		document.getElementById('but+').innerHTML = "+";
		bool=true;
	}
}
</script>
 
0
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
Modifié par kopax le 14/04/2010 à 22:02
Merci de ta réponse.
C'est presque bon, mais pas encore je suis vraiment désolé !.

Le site est en anglais et vietnamien.

Donc le liens "(+) More infos", le more infos est récuperer du fichier langue.
Autrement dit il ne peux pas être dans le javascript.

J'ai essayé comme cela mais ça ne fonctionne pas :
<A href="" onclick="cache('hide')">(</A> 
<A id="but+" onclick="cache('hide')">+</A> 
<A href="" onclick="cache('hide')">)</A> <A class="lienbleu" id="but+">


(j'ai essayé un coté avec juste le onclick, l'autre avec juste l'id, seul celui du milieu fonctionne).

Un autre problème ennuyeux qui j'éspére peux être regler,
La main pour signalé que c'est un lien ne s'affiche pas, ce qui peut être genant pour le visiteur.
J'ai donc mis un href="#extra" qui descend permet de descendre vers le tableau au clic, mais ça descend vers le tableau caché lorsque on le masque, c'est donc pas extra même si c'est pas non plus horrible.
Si ta une meilleur idée je suis preneur.


En tout cas merci beaucoup pour ta patience :)
J'aurai du mieux expliqué des le départ je te l'accorde.
0
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 15/04/2010 à 00:02
ce probleme de main qui s'affiche normalement quant on survol un lien, c'est un probleme qui m'avait bien ennuyé, et je trouve ta methode d'encre vraiment pas bete je n'y avais pas pensé. J'étais a deux doigts de demander sur un forum mais je l'ai jamais fais. Moi ,pas toujours, je fais un systeme d'image en javascript qui change sur le survol de la sourie, pour que l'internaute comprenne qu'il faut cliquer.

Apres pour le premier probleme j'ai du mal a comprendre. Tu ne pas utilser ça pour faire un lien "(+) More infos"?? normalement il n'y a pas de probleme. Que ce soit en dure ou pas. Enfin là on parle peut etre de choses que je connais pas.

Attend je crois que je comprend:

<A href="" onclick="cache('hide')">(</A> 


Ca, ça peut pas marcher, car avec le code javascript que j'ai posté il faut obligatoirement l'id du lien:

 <script>
..........
		document.getElementById('but+').innerHTML = "-";
..........
</script>
 




le code ci-dessous ça peut pas marcher non plus

<A href="" onclick="cache('hide')">)</A> <A class="lienbleu" id="but+"> 


Car il n'y a pas l'id (but+ c'est un peu nase comme id), et puis a la fin tu repars sur un lien qui n'est pas fermé, donc qui risque de prendre tous le texte qui pourrait suivre.

Le code du milieu il marche, c'est normal il y a bien l'id, mais pourquoi ne le présente tu pas comme ceci:

<A onclick="cache('hide')">(+) More infos</A> 


puis dans les deux ligne innerHtml du javascript tu pourrais faire ça:
 <script>
...............
		document.getElementById('but+').innerHTML = "(-) More infos";
		..............
		document.getElementById('but+').innerHTML = "(+) More infos";
..........
</script>
 


0
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
Modifié par kopax le 15/04/2010 à 10:21
Désolé pour la fin de la balise A manque la suite.

Car dans mon code more infos est une variable (définie par le fichier langue)

en.php
$public_products_more_infos = "More infos";

vn.php
$public_products_more_infos = "Thêm infos";

includes.js
// FONCTION QUI VA AFFICHER/CACHER UN TABLEAU SUR LES FICHES PRODUITS 
var bool=true; 
function cache(id){ 
 if(bool==true){ 
  document.getElementById(id).style.display='block'; 
  document.getElementById('but+').innerHTML = "(-)"; 
  bool=false; 
 }else{ 
  document.getElementById(id).style.display='none'; 
  document.getElementById('but+').innerHTML = "(+)"; 
  bool=true; 
 } 
} 
//-->

products.php
<?php 
// On affiche un liens vers les extras si il y a des extras. 
if(!empty($products_extra_text)) 
  { 
 echo '<A href="#more" class="lienbleu" id="but+" onclick=cache("hide")>(+)</A>'; 
    echo '<A href="#more" class="lienbleu" id="but+" onclick=cache("hide")>'.$public_products_more_infos.'</A>'; 
  } 
?>



Enfin, je pense que c'est plus claire pour une fois.
Le "More infos" ne peux pas être dans la partie javascript, il me faut un moyen pour que il affiche le tableau mais ne change pas.
0
kopax Messages postés 33 Date d'inscription lundi 28 mai 2007 Statut Membre Dernière intervention 6 octobre 2022 4
15 avril 2010 à 11:28
En faite c'est bon,

Je n'avais pas essayé mais j'ai remarqué qu'il ne change pas toute la phrase mais uniquement le (+) en (-).

Finalement je peux laisser le code tel quel.


Merci beaucoup pour ton aide et pour avoir partagé ton savoir.

Merci encore
0