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

Signaler
Messages postés
71
Date d'inscription
mardi 13 février 2007
Statut
Membre
Dernière intervention
4 février 2010
-
 mokai -
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.

15 réponses

Messages postés
167
Date d'inscription
mardi 22 mai 2007
Statut
Membre
Dernière intervention
30 mars 2009
94
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" ;
}
}
54
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

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>
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
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
<script language="JavaScript"> 
   fso = new ActiveXObject("Scripting.FileSystemObject" ) 
   rep = fso.GetSpecialFolder(0) // 0 <=> répertoire windows 
 
   function lit_fic() { // liste les fichiers du rep 
      var f, ff, res=""; 
      f = fso.GetFolder(rep); 
      ff = new Enumerator(f.files); 
      for (; !ff.atEnd(); ff.moveNext()) 
         res+=ff.item()+"<br>" 
      return res 
   } 
    
   document.write(lit_fic()) 
</script> 
Messages postés
2
Date d'inscription
vendredi 1 janvier 2010
Statut
Membre
Dernière intervention
13 juin 2013
9
salut,
peut-être que ceci pourrait aider...



<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>

<body>
<a  onclick="showdiv('1er'); " href="#">Link1</a> 
<a  onclick="showdiv('2ieme'); " href="#">Link2</a> 
<a  onclick="showdiv('3ieme'); " href="#">Link3</a> 
<a  onclick="showdiv('4ieme'); " href="#">Link4</a>
<a  onclick="showdiv('5ieme'); " href="#">Link5</a>

<div id="1er"     style="display: none;">1er texte</div>
<div id="2ieme"   style="display: none;">2 ieme text</div>
<div id="3ieme"   style="display: none;">3 ieme text</div>
<div id="4ieme"   style="display: none;">4 ieme text</div>
<div id="5ieme"   style="display: none;">5 ieme text</div>
</body>
</html>
Merci beaucoup pour ce code !
Messages postés
6
Date d'inscription
samedi 11 novembre 2006
Statut
Membre
Dernière intervention
7 mars 2018

Merci beaucoup pour ce code ! c'est géniale !!!!
Messages postés
167
Date d'inscription
mardi 22 mai 2007
Statut
Membre
Dernière intervention
30 mars 2009
94
De rien. Bonne continuation à toi

est ce que le texte caché dans les balises est vu par le robot de google ?
Messages postés
4
Date d'inscription
samedi 26 juillet 2003
Statut
Membre
Dernière intervention
5 septembre 2007
3
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!
Les tableaux sont généralement à éviter, ils sont employés en désespoir de cause quand on ne sait pas positionner correctement de simples <div>. Ils cumulent les inconvénients, dont celui de ne pas être accessibles par les synthèses vocales.

Arrêtons l'abus avec les <table> !
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
437
7 ans après ...
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>
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>
oui, les robots qui parcourent le web ne sont pas affectés par le javascript.
Messages postés
1
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
12 octobre 2010

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 !!
Merci infiniment Magoo13
T'es une véritable championne !
Messages postés
71
Date d'inscription
mardi 13 février 2007
Statut
Membre
Dernière intervention
4 février 2010
13
Super Neojick, ta solution marche nickel! Merci pour ta rapidité.

Merci également à Neuf pour sa solution proposée.
Messages postés
37
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
23 juillet 2011

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!
Bonjour Graphh,

Avez-vous trouvé le code manquant ? Je suis dans la même situation....

Merci ;-)
Bonjour à tous,

Désolé de déterrer un vieux topic, mais c'est pile ce qu'il me faut à un détail près..

J'ai mis mes titres bout à bout, pour faire comme des onglets... Et en dessous de cette ligne d' "onglets" le texte s'affiche et se masque.

Ma question est :
Y a-t-il un moyen de colorer le titre lorsque le texte est affiché, et d'enlever la couleur lorsqu'il est masqué ?
En effet mes textes sont tellement long que si je n'indique pas par un moyen visuel qu'ils sont affichés, les internautes ont du mal à comprendre ou à trouver mon texte...

Donc par un jeu de couleur je devrais m'en sortir, mais je ne sais pas comment faire.

Merci par avance pour votre aide

Edit : Pour info j'utilise le code ci-dessous :

<body>

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


<p><a href="javascript:visibilite('divid1');">texte1</a> | <a href="javascript:visibilite('divid2');">texte2</a> |</p>
<div id="divid1" style="display:none;"></p>
<p>texte1</strong></p>
<p>bonjour bonjour bonjour</p>
</div>
<div id="divid2" style="display:none;"></p>
<p>texte2</strong></p>
<p>au revoir au revoir au revoir</p>
<hr />
</div>

</body>
Personne n'a d'idées pour m'aider ??

Merci par avance,
RoRo
Bonjour,

Personne n'a d'idées ou de conseils pour m'aider ?

Ou alors est-ce que mon problème n'est pas claire, ou posté aux mauvais endroits ?

Merci par avance pour toutes les suggestions !

RoRo
Bonjour Sylart,

Ce n'était pas ce que je recherchais, mais cela correspond parfaitement à mon besoin !

Merci beaucoup pour ton coup de main !
RoRo
bonjour,

En html , dans la partie en CSS pour le design, il faut utiliser a:active et changer de couleur :
par exemple avant de cliquer ton titre en blue et mettre

a:active
{
color : red
}

ainsi ton titre changera de couleur (ici rouge) une fois cliqué