Créer un panneau qui se déroule en cliquant dessus [Résolu]

Signaler
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007
-
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007
-
bonjour, je suis débutant en javascript,  je code ma page en php et j'aurai besoin de faire un panneau déroulant qui s'affiche lorsqu'on clique sur une barre au dessu et qui se cache si on clique une deuxieme fois... 

(à la maniere des encadrés "recherche sur le site" ou "information sur votre compte" de la page d'acueuil de javascriptfr.com)

le souci c'est que je n'ai aucune idée de comment faire... je me doute que ce n'est pas en php pure que je vai faire ça (il faut que ça se passe coté client) d'où ma question ici ^^

pourriez vous m'aider ?

15 réponses

Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

AAAh merci beaucoup ...

oui ça marche bcp mieu en modifiant le display au lieu du visibility ^^

je met le code pour ceux qui rechercherai la meme chose :

<script language="JavaScript" type="text/JavaScript">

function CacheMessage(){
if(document.getElementById("message").style.display == "block")
document.getElementById("message").style.display = "none";

else
document.getElementById("message").style.display = "block";
}
</script>

[Javascript:CacheMessage(); Afficher/masquer le plan]


le contenu a afficher/masquer



merci encore bultez pour ton aide :)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
Bonjour,

    >>à la maniere des encadrés "recherche sur le site"

    >>je me doute que ce n'est pas en php



    tu as raison, c'est plutôt du javascript.
    pourquoi ne pas regarder pas la source ?
    tu y verras probablement un span, un div, un iframe... que sais-je,
       caché que l'on dévoile ( style.display ).

    sinon, rechercher dans les sources... ( par exemple, de mémoire d'Alzheimer,
        NickAdele a pondu un script qui explique parfaitement ça et qui "marche"
       dans tous les cas, partout  )

<hr />


Cordialement            Bul    
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

j'ai bien regarder le code source de la page et meme chercher la fonction correspondant dans les fichier .js et essayer de l'adapter à ma page :

<SCRIPT LANGUAGE="JavaScript">
function Reduc(elmtTitre)
{
var elmt = elmtTitre.parentNode.parentNode;
if (elmt.children[0].className == "expand")
{
elmt.children[1].className = "contentcollapse";
elmt.children[0].className = "collapse";
SetCookie(elmt.id,"collapse");
}
else
{
elmt.children[1].className = "content";
elmt.children[0].className = "expand";
SetCookie(elmt.id,"expand");
}
}

</SCRIPT>


Plan :



mon contenu à cacher ou montrer ...




cela ne fonctionne pas... j'ai surment mal compris le fonctionnement ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
c'est probablement un peu trop sohistiqué pour ce que tu veux faire...

un ch'tit exemple basique

<SCRIPT type="text/JavaScript">
function Reduc()
{    var s=document.getElementById("Rech");
     s.style.display=s.style.display=="none"?"inline":"none";
}
</SCRIPT>
montrer/cacher
exemple

il restera à positionner le span ( ou autre ! regarder le script de NickAdele ! )
là où l'on veut ...etc...
et il faut bien quelquechose où cliquer ( quand l'élément est caché
    on ne peut plus cliquer dessus )

<hr />


Cordialement                Bul    
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

:s c'est moche de mettre le onclik sur un

mon contenu



c'est bien ce que tu me disais ?
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

:s c'est moche de mettre le onclik sur un

mon contenu



c'est bien ce que tu me disais ?
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

je trouve pas le script de NickAdele...
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

ah si j'ai trouver, j'arrive a cacher mon
avec un lien mais comment le faire réafficher en recliquand dessus ? :P

le code (par NickAdele en effet, ce code sert en fait a cacher un "fausse pop-up placer dans un div dans une iframe à la base mai je l'ai modifier pour ma page ..^^ biensur il n'étai pas prévu pour pouvoir faire réapparaire le
a volonté :P )

code:

<script language="JavaScript" type="text/JavaScript">

function CacheMessage(){
document.getElementById("message").style.visibility = "hidden";
if (navigator.appName==\'Microsoft Internet Explorer\') document.getElementById("framemessage").style.visibility = "hidden";
}
</script>


[Javascript:CacheMessage(); Afficher/masquer le plan]Fermer



mon contenu
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>:s c'est moche de mettre le onclik sur un >et puis  ça ne fonctione tjr pas

    sur ton script je suppose ? car sur mon exemple, ça baigne
            essayes donc tel quel...
    dire que ça ne fonctionne pas ça aide drôlement pour
        aider... un message d'erreurs ? que se passe-t-il ? ....

    à propos :






|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷|
| Avec | et mieux : <label style="color: rgb(0, 128, 0);">Télécharger</label> |
|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷|
|<label style="color: rgb(128, 0, 0);">FireFox</label> |regarder la "console d'erreurs" | FireBug |
| | Outils / Console d'erreurs | |
|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷|
|<label style="color: rgb(128, 0, 0);">Internet Explorer</label>|activer le deboggage : utils/options Ile Debogger IE|
| | dans la liste, sous "Navigation" : décocher | |
| | ° Afficher une notification de chaque erreur de script | |
| | ° Désactiver le débogage de Scripts (autres applications)| |
| | ° Désactiver le débogage de Scripts (Internet Explorer) | |
|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷÷|÷÷÷÷÷÷÷÷÷÷÷÷÷÷|






>>

je trouve pas le script de NickAdele...


    tu regardes les auteurs de sources, c'est classé ( et par hasard )
    tu peux voir les sources mises par celui que tu choisis.
    c'est un exemple. tu peux faire autrement....




<hr />



Cordialement                Bul    
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

autre probleme le div se cache, mai l'espace prévu pour le div reste...

ça fait un espace blanc vide et solitaire en plein milieu ...
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>j'arrive a cacher mon
avec un lien
    avce un lien ? quelle horreur ! franchement, c'est pas beau.

>>mais
comment le faire  réafficher en recliquand dessus ? :P
    inspire toi de mon exemple
    tu testes dans quel état est le div, et tu agis en conséquence.




<hr />



Cordialement                Bul    
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
>>le div se cache, mai l'espace prévu pour le div reste...
    style.display (mon exemple) en lieu et  place de style.visibility



<hr />



Cordialement            Bul    
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

OUAH tu vien de me changer la vie en me montrant l'existence d'une console d'erreur ! serieusement merci je t'assure je savai pas ^^


bon le probleme ici c'est qu'il n'y a plus d'erreurs :P
mai le script de NickAdele ne correspond pas vraimetn a ce que je cherchai j'ai l'impression ... j'ai réussi à réafficher mon div en réjoutant une condition dans la fonction cachemessage() ...

mais lorsque le div est invisible, l'espace qui lui est reservé reste là, tout blanc ...

une idée pour modifier ça ?
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

AAAh merci beaucoup ...

oui ça marche bcp mieu en modifiant le display au lieu du visibility ^^

je met le code pour ceux qui rechercherai la meme chose :

<script language="JavaScript" type="text/JavaScript">

function CacheMessage(){
if(document.getElementById("message").style.display == "block")
document.getElementById("message").style.display = "none";

else
document.getElementById("message").style.display = "block";
}
</script>

[Javascript:CacheMessage(); Afficher/masquer le plan]


le contenu a afficher/masquer



merci encore bultez pour ton aide :)
Messages postés
27
Date d'inscription
mardi 24 octobre 2006
Statut
Membre
Dernière intervention
24 mai 2007

>>j'arrive a cacher mon
avec un lien
avce un lien ? quelle horreur ! franchement, c'est pas beau.


^^ c'est vrai mai c'est mieu qu'un gro boutton ! :P
mai je vai faire ça bien avec une image je pense ... enfin bref on est hors sujet est comme tu l'a si bien dit :

chacun ses gouts et moi j'aime pas les moutons ! ;)