Les Allergies
Alimentaires
Posez votre question Signaler

[html] cacher ou afficher des éléments [Résolu]

neointhematrix 74Messages postés 13 février 2007Date d'inscription - Dernière réponse le 1 févr. 2012 à 19:31
Bonjour à tous, je désirerai faire quelque chose en HTML (de simple je pense) mais je lutte vraiment car je ne sais pas comment m'y prendre.
J' ai par exemple un lien avec un texte en dessous :
ICI C'EST LE LIEN 1
[TEXTE1]Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tous Bonjour à tousBonjour à tousBonjour à tousBonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tousBonjour à tous Bonjour à tousBonjour à tousBonjour à tous [TEXTE1]
ICI C'EST LE LIEN 2
[TEXTE2]Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir [TEXTE2]
-->J'aimerai que lorqsue que je clique sur le premier lien, tous le [TEXTE1] disparaisse et que cà donne ca :
ICI C'EST LE LIEN 1
ICI C'EST LE LIEN 2
[TEXTE2]Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir Aurevoir [TEXTE2]
--> c'est a dire que la suite de la page soit affichée tt de suite derriere le lien 1. Et que si je veux réafficher le [TEXTE1], je n'ai qu'à cliquer sur son lien.
Ce n'est pas évident à expliquer et j'espère avoir été clair.
Merci d'avance à tous.
Lire la suite 

[html] cacher ou afficher des éléments »

15 réponses
Réponse
+17
moins plus
Il faut faire ça en javascript.

Tu mets ton texte dans une div de cette façon :

<div id="id_div_1" style="display:none;">
            Texte à masquer, afficher
</div>




Et sur ton lien

a href="" onclick="javascript:visibilite('id_div'_1); return false;" >Lien</a>



Dans ton HEAD tu mets ce code javascript

function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
krys-28 - 28 déc. 2009 à 16:49
Bonjour,

Je dois être trop nulle parce que chez moi ça ne fonctionne pas :(

j'ai l'impression qu'il manque une ouverture de balise devant href mais meme en l'ajoutant rien )à faire mon lien apparait mais le texte non. Je ne sais pas bien ou est mon erreur

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
</head>

<body>

<a href="" onclick="javascript:visibilite('id_div'_1); return false;" >Lien </a>
<div id="id_div_1" style="display:none;">
Texte à masquer, afficher
</div>



</body>
</html>
Youssse69 - 30 juin 2011 à 10:15
faut modifier la ligne :
a href="" onclick="javascript:visibilite('id_div'_1); return false;"
par
a href="" onclick="javascript:visibilite('id_div_1'); return false;"
et ca va marcher, merci pour l'aide
ameni - 1 févr. 2012 à 19:31
dsl tout le monde j'ai un problème fondamental, j'aiconsulté la base pour affiché tout les données qui existe dans une table, la page devient très long ce qui rendre illisible, j'ai l'idée de mettre une petite image suivant lorsue il dépasse 30 enregistrements mai j'ai pas trouvé la solution c vous pouvez m'aider SVP et mercii d'avance
Ajouter un commentaire
Réponse
+5
moins plus
De rien. Bonne continuation à toi

jonnnnnnny - 1 mai 2009 à 16:33
est ce que le texte caché dans les balises est vu par le robot de google ?
Ajouter un commentaire
Réponse
+3
moins plus
Bonjour cher ami,

tout d'abord utilise un tableau pour organiser le tout.

<table>
<tr id="id_lien1"><td>ICI C'EST LE LIEN 1 </td></tr>

<tr id="id_texte1"></td>[TEXTE1]Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tous Bonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tous Bonjour à tousBonjour à tousBonjour à tousBonjour à tous Bonjour à tous Bonjour à tous Bonjour à tousBonjour à tousBonjour à tous Bonjour à tousBonjour à tousBonjour à tous [TEXTE1]</td></tr>
</table>

ensuite dans la balise <A> de ton lien tu utilisera du javascript pour cacher ou activer la ligne <tr> en question en invoquant son "id"

<A href="" onclick="javascript:document.ElementById('id_texte1').style.display="none";">

et pour la suite ce n'est plus qu'un jeux de test pour le réafficher ou non via l'intruction document.ElementById('id_texte1').style.display="";

Bon courage!
Ajouter un commentaire
Réponse
+3
moins plus
Bonjours, j'ai une petite question:

Quand je clic sur mon lien1, le texte 1 s'affiche (jusque la ça va ) mais je souhaiterai que le texte 1 ce cache pour afficher le texte 2 quand je clic sur le lien 2 et inversement (quand je clic sur le lien 1 le texte 2 ce cache et le texte 1 s'affiche), pouvez-vous m'aider ???

voici mon code :

<html>

<head>

<title>DHTML Test</title>

<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>

</head>

<body>

<a href="javascript:visibilite('divid');">lien 1</a>
<a href="javascript:visibilite('divid1');">lien 2</a>

<div id="divid" style="display:none;"><br>
Texte 1 : Bonjour !
</div>

<div id="divid1" style="display:none;">
Texte 2 : Au Revoir !
</div>

</body>
</html>
Ajouter un commentaire
Réponse
+2
moins plus
Bonjour,
je viens de réaliser l'exercice, car c'est ce que je recherche à faire également, mais ça ne fonctionne pas.


Voici mon code :

<html>

<head>

<title>DHTML Test</title>

<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>

</head>

<body>

<a href="" onclick="javascript:visibilite('divid'); return false;">Lien 1</a>
<a href="" onclick="javascript:visibilite('divid1'); return false;">lien 2</a>

<div id="divid" style="display:none;"><br>
Texte 1 : Bonjour !
</div>

<div id="divid1" style="display:none;">
Texte 2 : Au Revoir !
</div>

</body>
</html>



Quand je clique sur Lien 1, mon texte correspondant s'affiche. Ensuite, quand je clique sur Lien 2, le texte de Lien 1 se ferme et le texte de Lien 2 s'affiche. Etc.. etc... Lien 3 / Lien 4...

Merci pour votre aide !!
sbso - 24 oct. 2010 à 07:58
Merci infiniment Magoo13
T'es une véritable championne !
Tronkov - 6 déc. 2011 à 23:23
[url=www.google.com]ICI/url
Ajouter un commentaire
Réponse
+1
moins plus
Super Neojick, ta solution marche nickel! Merci pour ta rapidité.

Merci également à Neuf pour sa solution proposée.
Ajouter un commentaire
Réponse
+1
moins plus
oui, les robots qui parcourent le web ne sont pas affectés par le javascript.
Ajouter un commentaire
Réponse
+1
moins plus
Il s'agit juste d'une petite erreur dans le code de neojick : c'est

<a href="" onclick="javascript:visibilite('id_div_1'); return false;" >Lien</a>

et non

a href="" onclick="javascript:visibilite('id_div'_1); return false;" >Lien</a>
Ajouter un commentaire
Réponse
+1
moins plus
Je déterre le sujet, mais si quelqu'un peut juste m'indiquer ce qu'il faut ajouter pour que, lorsque j'ouvre un div à l'aide du lien, les autres div se ferment.
Donc en gros:

J'ouvre le div1 à l'aide du lien1, et lorsque je clique sur le lien2 pour ouvrir le div2, le div1 se ferme automatiquement.

J'utilise le même script que Magoo13.

D'avance, merci!
Ajouter un commentaire
Ce document intitulé « [html] cacher ou afficher des éléments » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?