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

neointhematrix 72 Messages postés mardi 13 février 2007Date d'inscription 4 février 2010 Dernière intervention - 5 sept. 2007 à 11:09 - Dernière réponse :  mokai
- 27 juil. 2017 à 10:59
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.
Afficher la suite 
72Messages postés mardi 13 février 2007Date d'inscription 4 février 2010 Dernière intervention

27 réponses

neojick 167 Messages postés mardi 22 mai 2007Date d'inscription 30 mars 2009 Dernière intervention - 5 sept. 2007 à 11:17
+41
Utile
5
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" ;
}
}
Cette réponse vous a-t-elle aidé ?  
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> 
neojick 167 Messages postés mardi 22 mai 2007Date d'inscription 30 mars 2009 Dernière intervention - 5 sept. 2007 à 11:34
+4
Utile
1
De rien. Bonne continuation à toi

est ce que le texte caché dans les balises est vu par le robot de google ?
sylart 2 Messages postés vendredi 1 janvier 2010Date d'inscription 13 juin 2013 Dernière intervention - Modifié par sylart le 13/06/2013 à 14:19
+4
Utile
2
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 !
wardan 5 Messages postés samedi 11 novembre 2006Date d'inscription 15 juillet 2016 Dernière intervention - 16 mai 2016 à 19:40
Merci beaucoup pour ce code ! c'est géniale !!!!
neuf 4 Messages postés samedi 26 juillet 2003Date d'inscription 5 septembre 2007 Dernière intervention - 5 sept. 2007 à 11:23
+3
Utile
2
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> !
Pitet 2362 Messages postés lundi 11 février 2013Date d'inscription 30 novembre 2017 Dernière intervention - 19 août 2014 à 16:06
7 ans après ...
+1
Utile
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>
+1
Utile
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>
illeriane - 18 juin 2009 à 10:55
0
Utile
oui, les robots qui parcourent le web ne sont pas affectés par le javascript.
Magoo13 1 Messages postés mardi 12 octobre 2010Date d'inscription 12 octobre 2010 Dernière intervention - 12 oct. 2010 à 16:54
0
Utile
1
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 !
neointhematrix 72 Messages postés mardi 13 février 2007Date d'inscription 4 février 2010 Dernière intervention - 5 sept. 2007 à 11:29
-1
Utile
Super Neojick, ta solution marche nickel! Merci pour ta rapidité.

Merci également à Neuf pour sa solution proposée.
graphh 37 Messages postés mercredi 18 février 2009Date d'inscription 23 juillet 2011 Dernière intervention - 23 juil. 2011 à 18:42
-1
Utile
1
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 ;-)
-1
Utile
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>
-1
Utile
Personne n'a d'idées pour m'aider ??

Merci par avance,
RoRo
-1
Utile
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
-1
Utile
Bonjour Sylart,

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

Merci beaucoup pour ton coup de main !
RoRo
-1
Utile
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é