Signaler

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

Posez votre question neointhematrix 72Messages postés mardi 13 février 2007Date d'inscription 4 février 2010 Dernière intervention - Dernière réponse le 27 juil. 2017 à 10:59 par 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.
Utile
+41
plus moins
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é ?  
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
aaa- 6 janv. 2013 à 19:13
<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> 
Utile
+4
plus moins
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 ?
Utile
+4
plus moins
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>
wapo- 27 août 2014 à 10:41
Merci beaucoup pour ce code !
wardan 5Messages 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 !!!!
Utile
+3
plus moins
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!
Genroa- 19 août 2014 à 15:40
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 2301Messages postés lundi 11 février 2013Date d'inscription 10 octobre 2017 Dernière intervention - 19 août 2014 à 16:06
7 ans après ...
Utile
+1
plus moins
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>
Utile
+0
plus moins
oui, les robots qui parcourent le web ne sont pas affectés par le javascript.
Utile
+0
plus moins
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>
Utile
+0
plus moins
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 !
Utile
-1
plus moins
Super Neojick, ta solution marche nickel! Merci pour ta rapidité.

Merci également à Neuf pour sa solution proposée.
Utile
-1
plus moins
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!
Mendosa- 23 mai 2013 à 16:32
Bonjour Graphh,

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

Merci ;-)
Utile
-1
plus moins
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>
Utile
-1
plus moins
Personne n'a d'idées pour m'aider ??

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

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

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

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !