Plusieurs textes cachés javascript, mais problèmes ID avec W3C

Résolu/Fermé

Isis5902 Messages postés 3 Date d'inscription dimanche 7 février 2010 Statut Membre Dernière intervention 23 mars 2013 - 22 mars 2013 à 17:02
Isis5902 Messages postés 3 Date d'inscription dimanche 7 février 2010 Statut Membre Dernière intervention 23 mars 2013 - 23 mars 2013 à 22:52

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">
//
</script>

Encore merci pour votre aide,
Cordialement,
Isis5902

1 réponse

Réponse 1 / 1

ReDLoG Messages postés 243 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 28 octobre 2021 57
22 mars 2013 à 17:29

Bonjour,

Il faut inclure une boucle for qui va compter jusqu'à 6 dans ta fonction js afficher_cacher(id). ça devrait résoudre ton problème je pense...

Cdlt.

Isis5902 Messages postés 3 Date d'inscription dimanche 7 février 2010 Statut Membre Dernière intervention 23 mars 2013
22 mars 2013 à 17:54

Bonjour et merci ReDLog,

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

ReDLoG Messages postés 243 Date d'inscription mardi 12 mars 2013 Statut Membre Dernière intervention 28 octobre 2021 57
22 mars 2013 à 20:14

Inspire-toi de ce topic https://forums.commentcamarche.net/forum/affich-17756662-affiche-masquer-plusieurs-div-javascript
Avec une légère adaptation pour que ton lien change d'intitulé en passant de "Afficher texte" à "Cacher texte".

Cdlt.

Isis5902 Messages postés 3 Date d'inscription dimanche 7 février 2010 Statut Membre Dernière intervention 23 mars 2013
23 mars 2013 à 22:52

Bonjour ReDLog,

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

Newsletters