Code js pour faire apparaître un texte ...

> Tous les forums > Forum des Webmasters

Statut du sujet : NON RESOLU

jevina

Posté le 21/02/2007 @ 06:40

Petite astucienne

373 Messages

Bonjour,

J'ai trouvé le code ci-dessous pour faire apparaître un texte en cliquant sur un lien (par exemple lorsque ce texte est très long)..
Je voudrais pouvoir insérer, à la fin du texte en question, un autre lien permettant de faire disparaître le texte. J'imagine une image (flèche vers le bas) pour faire apparaître le texte, et une autre (flèche vers le haut) pour le refermer.
Quel code devrais-je ajouter ? (je n'y connais rien en langage javascript mais je peux m'adapter..)

Merci d'avance !

<head>
<title>...</title>
<script type="text/javascript">
//------------------
function Swap( div_){
var Obj = document.getElementById( div_);
if( Obj){
if( Obj.style.display=="")
Obj.style.display="none";
else
Obj.style.display="";
}
}
</script>
</head>
<body>
<a href="#" onclick="Swap('DIV_1');">Rubrique 1</a>
<div id="DIV_1" style="display:none; padding-left:10px;">
Ceci est le Texte de la Rubrique 1<br>
</div>
<br>
<br>
<a href="#" onclick="Swap('DIV_2');">Rubrique 2</a>
<div id="DIV_2" style="display:none; padding-left:20px">
Ceci est le Texte de la Rubrique 2
</div>
</body>
</html>

Publicité

Malcolm

Posté le 21/02/2007 à 09:14

Astucien

7304 Messages

essaie un truc comme ça :

<head>
<title>...</title>
<script type="text/javascript">
//------------------
function Swap(div_){
var Obj = document.getElementById( div_);
if(Obj){
if(Obj.style.display=="")
{
Obj.style.display="none";
document.getElementById("img_"+div_).src="image/fleche_bas.png";
}
else
{
Obj.style.display="";
document.getElementById("img_"+div_).src="image/fleche_haut.png";
}
}
}
</script>
</head>
<body>
<a href="#" onclick="Swap('DIV_1');">Rubrique 1</a><img id="img_DIV_1" src="image/fleche_bas.png" width="" height="" alt="">
<div id="DIV_1" style="display:none; padding-left:10px;">
Ceci est le Texte de la Rubrique 1<br>
</div>
<br>
<br>
<a href="#" onclick="Swap('DIV_2');">Rubrique 2</a><img id="img_DIV_2" src="image/fleche_bas.png" width="" height="" alt="">
<div id="DIV_2" style="display:none; padding-left:20px">
Ceci est le Texte de la Rubrique 2
</div>
</body>
</html>

jevina

Posté le 22/02/2007 à 16:20

Petite astucienne

373 Messages

D'abord, un grand merci à Malcolm pour son aide.
Je suis en train d'essayer le script.
Si j'ai des difficultés, je me permettrai de revenir...

Inscrivez-vous !

- Posez vos questions

- Résolvez vos problèmes

- Aidez les autres

- Participez et créez vos discussions

- Dialoguez en privé avec d'autres membres

- Suivez vos sujets préférés

- Affichez les signatures des membres

TOUT EST GRATUIT !

Je crée mon compte

Vous avez besoin d'aide ?

Des centaines d'experts sont à votre disposition sur les forums PC Astuces pour vous aider gratuitement, 24h/24, 7j/7.

> Tous les forums > Forum des Webmasters

Forum PC Astuces