Masquer/ démasquer des Div avec JavaScript

Version imprimable

Bonsoir,

Je me tournes vers vous car je suis dans une impasse !

Le principe est d'afficher à chaque clique sur un lien, un texte différent au même endroit : si je clique sur "Link1" alors "1er texte" apparait, puis si je clique sur "Link2", 2ième texte" apparait ET "1er texte" disparaît, etc

J'aimerais que ma 1ere div qui est rattachée à "Link1" soit visible dès le début et si je rappuie sur "Link1" elle se recharge or elle ne l'est que par appui sur le lien ce qui est logique !

J'ai essayé de créer une autre fonction pour id="1er" mais ça s’entremêle du coup que contiendra t'elle ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <!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 texte</div> <div id="3ieme" style="display: none;">3 ieme texte</div> <div id="4ieme" style="display: none;">4 ieme texte</div> <div id="5ieme" style="display: none;">5 ieme texte</div> </body> </html>
Merci

Bonjour,

1- solution 1 :

Code:

1
2
3
4
5
6
7
  <a onclick="showdiv(0); " href="#">Link1</a>
  <a onclick="showdiv(1); " href="#">Link2</a>
  <a onclick="showdiv(2); " href="#">Link3</a>
  <a onclick="showdiv(3); " href="#">Link4</a>
  <a onclick="showdiv(4); " href="#">Link5</a>
 
  <div id="divTexte" style="display:none;"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
    var textes = [
      '1er texte',
      '2ème texte',
      '3ème texte',
      '4ème texte',
      '5ème texte'
    ];
 
    function showdiv(id) {
      var divTexte = document.getElementById('divTexte');
      divTexte.style.display = 'block';
      divTexte.textContent = textes[id]; // si on peut avoir des balises HTML dans le "texte", remplacer .textContent par .innerHTML 
    }

2- solution 2 :

Code:

1
2
3
4
5
6
7
8
9
10
11
<a onclick="showdiv(1); " href="#">Link1</a>
<a onclick="showdiv(2); " href="#">Link2</a>
<a onclick="showdiv(3); " href="#">Link3</a>
<a onclick="showdiv(4); " href="#">Link4</a>
<a onclick="showdiv(5); " href="#">Link5</a>
 
<div class="divTexte" id="divTexte-1">1er texte</div>
<div class="divTexte" id="divTexte-2">2ème texte</div>
<div class="divTexte" id="divTexte-3">3ème texte</div>
<div class="divTexte" id="divTexte-4">4ème texte</div>
<div class="divTexte" id="divTexte-5">5ème texte</div>

Code:

.divTexte { display: none; }

Code:

1
2
3
4
5
6
7
function showdiv(id) {
  var divTextes = document.querySelectorAll('.divTexte');
  for (var i = 0, n = divTextes.length; i < n; i++) {
    divTextes[i].style.display = 'none';
  }
  document.getElementById('divTexte-'+id).style.display = 'block';
}

Bonsoir,

Je n'ai pas trop compris... Le code ci-dessous résout-il le problème?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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: block;">1er texte</div>
<div id="2ieme"   style="display: none;">2 ieme texte</div>
<div id="3ieme"   style="display: none;">3 ieme texte</div>
<div id="4ieme"   style="display: none;">4 ieme texte</div>
<div id="5ieme"   style="display: none;">5 ieme texte</div>
</body>
</html>

05/02/2019, 21h35
Jejey14

3 pièce(s) jointe(s)

Bonsoir,

Merci beaucoup pour votre rapidité: en fait c'est un peu un mix de vos codes

Citation:

Envoyé par jreaux62

2- solution 2 : ...

La solution 2 est parfaite mais au tout début j'ai : Pièce jointe 447661 alors que j'aimerais avoir seulement :Pièce jointe 447664

Citation:

Envoyé par eleydet

Le code ci-dessous résout-il le problème?

Lorsque j'appuie sur "Link2", texte2 apparaît en bas de Texte1 mais au bout de plusieurs clics de souris le script se met en place et tout fonctionne ^^

Je suis désolé de mettre mal exprimé dès le début mais la finalité est ma page d'accueil qui affiche par défaut Texte1 de Link1 et lors du clic sur Link2 alors texte2 apparaît et texte1 disparait

Pièce jointe 447667

Encore merci de votre temps
05/02/2019, 21h48
Invité
C'est effectivement un mixe des 2.

Tu devrais être capable de trouver tout seul, non ?

Sinon, il suffit d'ajouter le bout de CSS :
Code:

1 2 .divTexte { display: none; } #divTexte-1 { display: block; }
05/02/2019, 22h03
Jejey14

Je devrais y arriver en théorie oui :) en pratique ... je débute :oops: :pastaper:

A suivre
05/02/2019, 22h18
Jejey14

Citation:

Envoyé par jreaux62

Sinon, il suffit d'ajouter le bout de CSS :
...

C'est exactement ce que je cherchais à faire dans le sens où cela ne fonctionnais pas lorsque j’entremêlais class et id et puis Miracle ...

:merci: