Plusieurs textes cachés javascript, mais problèmes ID avec W3C
Résolu
Isis5902
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Isis5902 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Isis5902 Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour..
J'ai un script relatif au texte caché.. avec son css et le html.
(voir les codes à la fin de mon message)
Mais j'ai un problème dont je n'arrive pas à trouver la solution.
J'ai six textes à cacher.
Exemple :
Afficher
- 1er texte avec son blabla
Masquer
Afficher
- 2ème texte avec son blabla
Masquer
et ainsi de suite jusqu'à six.
Or, j'ai un souci avec W3C qui indique qu'une ID est unique (çà je le sais bien)
Comment faire pour que je puisse utiliser ce script six fois ? sachant que l'ID est unique. Et je ne connais pas le javascript pour me permettre de le modifier.
Y a t-il une astuce ou autre ? Ce serait très gentil de m'aider..
Voici le script, le css et le HTML :
<script language="JavaScript" type="text/JavaScript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
{
document.getElementById(id).style.visibility="visible";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.visibility="hidden";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}
</script>
Code: CSS
.bouton{color:#0000ff;font-size:24px;cursor:pointer;}
.bouton:hover{text-decoration:underline;}
.texte{border:1px solid #333333;background:#eeeeee;padding:10px;color:#333333;}
.texte:hover{border:1px solid #000000;background:#cccccc;color:#000000;}
code html :
<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
<div id="texte" class="texte">
blablablablablablablablablablablablablablablablablablablabla..etc..</div>
<script type="text/javascript">
//<!--
afficher_cacher('texte');
//-->
</script>
Encore merci pour votre aide,
Cordialement,
Isis5902
J'ai un script relatif au texte caché.. avec son css et le html.
(voir les codes à la fin de mon message)
Mais j'ai un problème dont je n'arrive pas à trouver la solution.
J'ai six textes à cacher.
Exemple :
Afficher
- 1er texte avec son blabla
Masquer
Afficher
- 2ème texte avec son blabla
Masquer
et ainsi de suite jusqu'à six.
Or, j'ai un souci avec W3C qui indique qu'une ID est unique (çà je le sais bien)
Comment faire pour que je puisse utiliser ce script six fois ? sachant que l'ID est unique. Et je ne connais pas le javascript pour me permettre de le modifier.
Y a t-il une astuce ou autre ? Ce serait très gentil de m'aider..
Voici le script, le css et le HTML :
<script language="JavaScript" type="text/JavaScript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.visibility=="hidden")
{
document.getElementById(id).style.visibility="visible";
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.visibility="hidden";
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}
</script>
Code: CSS
.bouton{color:#0000ff;font-size:24px;cursor:pointer;}
.bouton:hover{text-decoration:underline;}
.texte{border:1px solid #333333;background:#eeeeee;padding:10px;color:#333333;}
.texte:hover{border:1px solid #000000;background:#cccccc;color:#000000;}
code html :
<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
<div id="texte" class="texte">
blablablablablablablablablablablablablablablablablablablabla..etc..</div>
<script type="text/javascript">
//<!--
afficher_cacher('texte');
//-->
</script>
Encore merci pour votre aide,
Cordialement,
Isis5902
A voir également:
- Plusieurs textes cachés javascript, mais problèmes ID avec W3C
- Id telephone - Guide
- Jeux cachés google - Guide
- Telecharger javascript - Télécharger - Langages
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Gate first id ✓ - Forum Navigateur
Ok, il faut mettre une boucle for... mais je vais te paraître nulle (ce qui est vrai pour le javascript)
-:)
Mais où dois-je insérer ce "for" ?
Pourrais-tu me faire un modèle par rapport à mon script ? ce serait très gentil..
Cordialement,
Isis5902
Avec une légère adaptation pour que ton lien change d'intitulé en passant de "Afficher texte" à "Cacher texte".
Cdlt.
Je te remercie d'avoir pris le temps de me répondre.
Toutefois, plus novice que moi en javascript, y a pas..! -:)
Donc, je me suis tournée sur un autre script, qui, ma foi, me convient très bien, qui fonctionne très bien, et qui est accepté par W3C.
Je vais donc marquer ma demande comme "résolu".
Si cela peut aider quelqu'un, voici ci-dessous mon script, adaptable pour plusieurs divs, avec possibilité de se servir du css pour que ce soit plus joli, + le html + le css qui vont avec.
Nota : si vous voulez utiliser plusieurs divs dans une même page, ne pas oublier de rajouter un numéro au deux "divid", au bouton ainsi que dans le css. ('divid2') ("bouton2") (id="divid2") (ensuite dans votre css)
LE SCRIPT :
---------------
<script language="JavaScript" type="text/JavaScript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
Le HTML :
------------
<a href="javascript:visibilite('divid');"><span id="bouton">Afficher/Fermer</span></a>
<div id="divid" style="display:none;" class="texte">
<p>ici, insérer le premier texte de votre 1ère div</p>
</div>
<a href="javascript:visibilite('divid2');"><span id="bouton2">Afficher/Fermer</span></a>
<div id="divid2" style="display:none;" class="texte">
<p>ici, insérer le deuxième texte de votre 2ème div</p>
</div>
<a href="javascript:visibilite('divid3');"><span id="bouton3">Afficher/Fermer</span></a>
<div id="divid3" style="display:none;" class="texte">
<p>ici, insérer le troisième texte de votre 3ème div</p>
</div>
etc.. etc.. (autant que vous voulez..)
Le CSS correspondant :
-------------------------------
/* ceci est le css pour le "Afficher/Fermer" */
-----------------------------------------------------------
#bouton{color:#940000;cursor:pointer;margin-left:50px;font-style: italic;font-weight:bold;font-family:arial,sans-serif;font-size:10pt;text-decoration:underline;}
#bouton:hover{color:#5f5f5f;cursor:pointer;margin-left:50px;font-style: italic;font-weight:bold;font-family:arial,sans-serif;font-size:10pt;text-decoration:underline;}
/* ceci est le css de votre texte pour agrémenter le design de vos divs (couleur texte, cadre, background etc..) */
---------------------------------------------------------------------------------------------------------------------------
.texte{margin-top:8px;margin:20px;border:1px solid #d4d4d4;background:#f2f2f2;}
.texte:hover{border:1px solid #d4d4d4;background:#ffffff;color:#585858;}
Voilaaaa..
Bonne continuation,
Isis5902