Boite déroulante dans une page

Version imprimable

30/01/2008, 16h12
cyraile

2 pièce(s) jointe(s)

Boite déroulante dans une page

Bonjour,

Je ne sais pas si je poste dans le bon forum, mais je tente ici car il me semble que c'est le plus problable. Merci de me rediriger si je fais fausse route.

J'essaye de trouver comment faire un genre de box avec un bouton de déroulement pour permettre l'ouverture d'un corp de message.
Je ne sais pas si je m'exprime bien alors je joint 2 images :

plus et minus.

En fait la première étape consiste à afficher l'image 'plus' et quand on clique sur le plus, la boite s'allonge est fait appraître le corp du message. Ensuite on peut revenir à l'état initiale en cliquant sur le moins.

J'espère avoir été assez clair.

Merci d'avance.
30/01/2008, 17h31
bigboomshakala

bonjour,

2 <DIV> ou une <TABLE> avec 2 lignes

sur le clic sur l'image +
- tu testes l'image affichées, et tu la remplaces par la 2è (comme c'est +, on met -)
- tu fais apparaitre la 2è div (ou 2è ligne de la table) : style.display = 'block'

maintenant on a la partie basse affichée ainsi que l'image -

sur le clic sur l'image -
- tu testes l'image affichées, et tu la remplaces par la 2è (comme c'est -, on met +)
- tu fais disparaitre la 2è div (ou 2è ligne de la table) : style.display = 'none'

Salut :)

alors en gros :) :

coté js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
//si etat = true alors la fenètre est ouverte ...
var etat = true ;
function openClose(){
if(etat){
document.getElementById('contenu').style.display = "none";
document.getElementById('image').src = "tonurlimgplus";
etat = false;
}
else{
document.getElementById('contenu').style.display = "block";
document.getElementById('image').src = "tonurlimgmoins";
etat = true;
}
}

coté html :

Code:

1
2
3
4
5
 
<div>
<p><img src="" id="image" onclick="openClose()" /> .... ton titre</p>
<div>tout le contenu etc ...</div>
</div>

de tète donc désolé si il y a quelques erreurs, bon courage

31/01/2008, 11h42
cyraile
Merci beaucoup bigboomshakala et le_chomeur.

Petite correction

Coté HTML :
Code:

1 2 3 4 5 <div> <p><img src="" id="image" onclick="openClose()" /> .... ton titre</p> <div id="contenu">tout le contenu etc ...</div> </div>
Tu avais oublié id="contenu".

Donc voila ce bout de code marche très bien.

Je l'ai même modifié pour l'inclure dans une table afin d'avoir différentes lignes ayant cette propriété.

Merci encore.