Faire disparaitre et apparaitre une div
kopax
Messages postés
43
Statut
Membre
-
kopax Messages postés 43 Statut Membre -
kopax Messages postés 43 Statut Membre -
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.
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:
- Faire disparaitre et apparaitre une div
- Apparaitre hors ligne instagram - Guide
- Comment faire apparaître la tabulation sur word - Guide
- Comment faire apparaître le clavier sur une tablette - Guide
- Comment faire apparaître le curseur sans souris - Guide
- Apparaitre hors ligne whatsapp - Guide
13 réponses
Avec un code de ce type, c'est faisable:
le html (div+bouton) :
Le javascript:
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>
De rien avec plaisir mais juste pour que tu le sache tu peux faire comme ceci:
donc faire rentrer "$public_products_more_infos" dans la fonction javascript.
<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>
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 :
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 (+) (-)
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 (+) (-)
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
Mais j'ai cru comprendre que avec les feuille de style css, et un peu de javascript c'était possible.
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?
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?
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:
"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>
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 :
(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.
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.
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:
Ca, ça peut pas marcher, car avec le code javascript que j'ai posté il faut obligatoirement l'id du lien:
le code ci-dessous ça peut pas marcher non plus
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:
puis dans les deux ligne innerHtml du javascript tu pourrais faire ça:
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>
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
vn.php
includes.js
products.php
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.
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.
