11545 sujets

JavaScript, DOM et API Web HTML5

Afficher / Cacher du texte

Bonjour,

J'ai ce code qui me permet d'afficher ou cacher du texte. Seulement, les textes s'affichent l'un en dessous de l'autre.
J'aimerais que lorsque l'on clique sur un des liens, le texte correspondant s'affiche, et que les autres soient cachés. Qu'il n'y ait qu'un seul texte qui puisse être affiché à la fois. Je ne sais pas comment faire ça, quelqu'un à la solution svp ??

Voici le code: 


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





Merci. Smiley smile
Modérateur
Bonsoir Bess,

Même si ce n'est pas vraiment le sujet, je désire voir une page propre (valide) avec la sémantique qui va bien.

Mettre la charrue avant les boeufs, c'est aller droit au casse pipe. Smiley cligne
En jQuery se serait facile, il faudrait donc au préalable charger la bibliothèque susnomée, puis mettre une class sur les liens concernés (ex : .lien).

D'abord cacher par principe tous les éléments :
$('#text1,#text2,#text3').hide();

Puis définir les éléments déclencheurs (nos liens) :
$('.lien').click(function(){ /*le code d'action*/}

Ensuite ouvrir l'élement le plus proche du lien cliqué (grâce à (this).next) si celui-ci est caché.
Au préalable, vérification des liens cachés grâce à une condition :
if($(this).next('#text1:visible,#text2:visible,#text3:visible').length !=0){

Donc les conditions : 1. Si aucune div n'est encore affichée :
$(this).next('div').slideUp(500);}

2. Sinon (c'est à dire, s'il y a déjà une div affichée), cacher toutes les div, sauf celle qui nous intéresse (donc celle en dessous du lien cliquable grâce à (this).next) :
else{$('#text1,#text2,#text3').slideUp(500);
$(this).next('div').slideDown(500);}

Ce qui nous donne au final (avec un false en plus) :
$('#text1,#text2,#text3'').hide();
$('.lien').click(function(){
if($(this).next('#text1:visible,#text2:visible,#text3:visible').length !=0){
$(this).next('div').slideUp(500);}
else{$('#text1,#text2,#text3').slideUp(500);
$(this).next('div').slideDown(500);}
return false;});

Voili voilou. Si l'on souhaite afficher un élément par défaut, le code est simple à transformer...
Buy Smiley cligne

EDIT : J'utilise ce code pour un menu, mais je vois un problème avec IE 8 (et sans doute inférieur). Mais il s'agit sans doute d'un problème css, et non js... Je vais poser la question sur le forum...

REEDIT : en fait le code marche parfaitement. Mais PIE.htc, un script que j'utilise pour rendre IE8 compatible avec certains effets modernes (border-radius, box-shadow) fait planter le menu...
Modifié par Olivier C (30 Aug 2012 - 12:21)
Sujet clos
Aller à