cacher ou afficher du texte par simple clic

Sujet publié le par et classé dans

Bonjour,

je cherche a créer, comme le font certains treeview, un texte qui ne se voit que lorsque qu'on developpe un noeud !

exemple :

+ afficher mon texte 1
+ afficher mon texte 2
+ afficher mon texte 3


si je clique sur le plus de afficher mon texte 1, alors ça me donne :

- afficher mon texte 1
Voici mon texte, blblab, ça peut aussi être une image un tableau etc ... Voici mon texte, blblab, ça peut aussi être une image un tableau etc ... Voici mon texte, blblab, ça peut aussi être une image un tableau etc ...
+ afficher mon texte 2
+ afficher mon texte 3

Je sais le faire par actualisation de la page, mais je souhaiterai que ça soit plus dynamique, et qu'il charge tout le contenu automatiquement, et qu'il ne l'affiche qu'en le déployant !

Je crois savoir qu'il y a des <div> dans l'histoire, et surement du javascript ! mais quelqu'un aurai un script complet pour ma demande ? un exemple déjà fait ?

merci pour votre aide précieuse

par ,
lol

répondre

j'ai trouvé une partie de mon problème ici : http://www.allhtml.com/forums/posts_list/topic:491182/query:cacher

Mais malheureusement, il garde un grand écart visible ou non entre les boutons !

Il faudrai que le div se deploye et redimensionne l'affichage !

sniff, dur dur

par ,
lol

Bonjour, tout nouveau dans ce forum, je sais qu'il y a un truc pour 'baliser' le code html/javascript dans ces messages, mais je n'ai pas (encore) trouvé comment, la charte est très courte...

Voici qui devrait t'aider : il ne faut prendre en compte seulement la propriété 'visibility', mais aussi la propriété 'display'. Dans quel(s) navigateur(s) effectues-tu tes tests ?

<html>
<head>
<script type="text/javascript">
// Méthode pour changer la visiblité d'une balise dont l'ID est passée en paramètre
function toggleVisibility(tagId) {
if (!document.getElementById) {
msg = 'Votre navigateur est trop ancien pour profiter de votre visite\n';
msg += 'Veuillez le mettre à jour ou vous en procurer un autre';
return false;
}
var tagToToggle;
try { // On tente de récupérer la balise cible dont on doit changer la visibilité
tagToToggle = document.getElementById(tagId);
} catch (e) { // Si échec de la récupération de la balise cible
alert('Je n\'ai pas pu trouver la balise cible');
}
try { // Seulement pour les non IE
if (tagToToggle.style.display == 'none') {
tagToToggle.style.display = 'inline';
} else {
tagToToggle.style.display = 'none';
}
} catch (e) {
}
// Pour IE
if (tagToToggle.style.visibility == 'hidden') {
tagToToggle.style.visibility = 'visible';
} else {
tagToToggle.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<div>
<a href="javascript:toggleVisibility('texte1')">
Changer la visibilité du texte 1
</a>
</div>
<div id="texte1" style="visibility: hidden; display: none;">
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
</div>
<div>
<a href="javascript:toggleVisibility('texte2')">
Changer la visibilité du texte 2
</a>
</div>
<div id="texte2" style="visibility: hidden; display: none;">
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
</div>
<div>
<a href="javascript:toggleVisibility('texte3')">
Changer la visibilité du texte 3
</a>
</div>
<div id="texte3" style="visibility: hidden; display: none;">
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test, Texte test,
</div>

</body>
</html>

par ,

Impeccable sous firefox, mais cela ne fonctionne pas sous IE8...suis-je le seul a avoir ce problème ?

par ,

Salut,

chez moi ça fonctionne sous I.E.8

L.

par ,
ben mon colon ... pas glop !

Bonjour, je me permets de remonter topic car je suis intéréssez par se script mais le problème est le suivant:

je clic sur lien 1-------> texte 1 s'affiche (jusque là ok)
je clic sur lien 2 le texte 2 s'affiche mais le texte 1 est toujours là et je le veux pas lui . Donc j'ai le texte 1 + texte 2
Je clic sur lien 3 j'ai texte 1 + texte 2 + texte 3
et ainsi de suite

comment faire pour que quand

je clic lien 1 ------ texte 1 s'affiche
je clic lien 2 ------ texte 2 s'affiche
Je clic lien 3 ------- texte 3 s'affiche

Merci a ceux qui peuvent m'aider

par ,

Quelqu'un s'il vous plait

par ,

Bonsoir,
avant d'afficher le texte voulu, on les cache tous. A+
on peut le faire plus passe partout en défilant toutes les div et les cacher dans une fonction et appeler cette fonction avant d'afficher , pour 3 éléments on peut le faire plus "bourrin" A+

par ,

répondre