Masquer/ démasquer des Div avec JavaScript

**Jejey14** · 05/02/2019, 18h42

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 05/02/2019, 20h23

Bonjour,

1- solution 1 :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

.divTexte { display: none; }

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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';
}

**eleydet** · 05/02/2019, 20h31

Bonsoir,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Jejey14** · 05/02/2019, 21h35

Bonsoir,

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

Envoyé par jreaux62

2- solution 2 : ...

La solution 2 est parfaite mais au tout début j'ai : Nom : link.PNG
Affichages : 110
Taille : 3,3 Ko

alors que j'aimerais avoir seulement : Nom : texte1.PNG
Affichages : 119
Taille : 1,7 Ko

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

Nom : inbox.PNG
Affichages : 108
Taille : 13,0 Ko

Nom : inbox.PNG
Affichages : 108
Taille : 13,0 Ko

Encore merci de votre temps

Invité · 05/02/2019, 21h48

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.divTexte { display: none; }
#divTexte-1 { display: block; }

**Jejey14** · 05/02/2019, 22h03

Je devrais y arriver en théorie oui

en pratique ... je débute

A suivre

**Jejey14** · 05/02/2019, 22h18

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 ...

Masquer/ démasquer des Div avec JavaScript

JavaScript

Discussions similaires

Partager

Partager