Discussion :

[guian]

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...

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, ou meme simplement m'indiquer une piste de recherche... ?

[binouzzz19]

je ne sais pas le faire !! Mais regarde la source de la page d'exemple que tu as donné !! Je pense que tu peux faire quelque chose peut-être

[guian]

oui en effet,
ils utilisent une balise span avec un onclik="Reduc(this)"
c'est une fonction qui doit etre définie dans un des fichier .js importés
je fouille donc ces fichiers et je trouve la fonction Reduc() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<h2 class="expand"><span onclick="Reduc(this)" id="Rech" class="E">&nbsp;</span><em class="SEARCH">Rechercher sur le site</em></h2>
<div class="content">
...
</div>
 
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");
        }
    }

je recherche comment adapté cela a ma page ... merci, je reviend pour dire si c bon ou si j'ai encore besoin d'aide

[guian]

voila commen j'ai transformer le code ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
<h5 class="expand">
<span onclick="Reduc(this)" id="Rech" class="E">&nbsp;</span>
mon Titre :
</h5>
<div class="content">
 
monconteu ...
 
</div>

en inserant la fonction Reduc entre deux balise <SCRIPT>...

mais ça ne fonctionne pas...
une idée ?

[binouzzz19]

Ou as-tu mis la fonction Reduc ?

Il faut que tu la mettes dans le head !!

Autrement, je ne sais pas, je ne fais que des vérifications de champs en javascript. Désolé.

Juste pour information : Je pense que c'est plus simple en ajax, j'en ai entendu parler ca n'a pas l'air trop dur pour faire cela.

Tu me tiens informé stp pour la réponse !!

Merci

[guian]

oué de toute façon quand je pose une question a plusieurs endroit je post tjr la réponse partout car ça peut servir a d'autre...


ne peut-on pas placer une fonction javascript entre deux balises n'importe où sur la page ?

[guian]

j'ai trovuer une autre maniere ... :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function CacheMessage(){
  if(document.getElementById("message").style.visibility == "hidden")
  document.getElementById("message").style.visibility = "visible";
  else
  document.getElementById("message").style.visibility = "hidden";
 
}
 
 
<a href="Javascript:CacheMessage();">Afficher/masquer </a>
<div id="message">
mon contenu a afficher / masquer
</div>

le probleme c'est qu'en rendant la visibility "hidden" (caché) je ne récupere pas lespace, il est tjr réservé a cet élément ...
en fait mon div est assez long c'est pour ça que je veu le cacher pour récupérer l'espace correspondant... mai la il s'efface et laisse un espace blanc a la place...

[SpaceFrog]

ça c'est vraiment bête j'ai posté le code la semiane dernière ...

[binouzzz19]

sinon tu modifie le css dans une balise style (a la barbare) dans lequel tu modifie des propriétés tels que height ou width ...

[guian]

bon j'ai finalement réussi ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function CacheMessage(){
  if(document.getElementById("message").style.display == "none")
  document.getElementById("message").style.display = "block";
  else
  document.getElementById("message").style.display = "none";
 
}
 
 
<a href="javascript:CacheMessage();">Afficher/masquer </a>
<div id="message">
mon contenu a afficher / masquer
</div>

[binouzzz19]

bien joué

[guian]

spacefrog ... ? t'es un super modero toi

je m'ennuirai sans toi tu sais bien ^^



bon aller ^^ résolu! à une prochaine (t'a vu j'ai été sage ! )

[SpaceFrog]

Un peu de finesse dasn un monde de brute ...
En lisant entre les lignes tu aurais compris le message subliminal ...

'Fais une recherche sur le forum il y a un code tout fait de ce que tu cherches'