Afficher/Masquer un bloc DIV

Version imprimable

Bonjour,

Je ne sais pas si je poste mon message dans la bonne section du forum. Veuillez m'en excuser à l'avance, mais c'est la première fois que je poste ici.

Me voilà bien embêté ! :o

Depuis plusieurs jours, je cherche à faire apparaître un bloc au clic sur un onglet (<li> avec tabindex), jusque là, pas trop de soucis. Mes blocs s'affichent et s'effacent tant que je clic sur les onglets. :)

C'est maintenant que cela se corse !! :(

Dès que je clic en dehors de mes onglets, le bloc affiché s'efface à nouveau. Là je comprends encore. Le fait de perdre le focus de l'onglet, normal tout s'efface. :colere2:

Ma demande est la suivante :

Y a-t-il un moyen de garder le focus sur l'onglet actif même si on clic ailleurs sur la page ?

Je suis débutant en JS et je suis sur un projet perso pour gérer mes élèves. :magicien:

Voici mes bouts de codes :

HTML

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<fieldset id="infosFact">
   <legend>Informations de Facturations</legend>
      <div class="totalFact">
        <p>Total Facturation</p>
        <h3>0,00€</h3>
     </div>
     <div class="totalSelect">
        <p>Total Selection</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
      </div>
 </fieldset>
 
 <fieldset id="infosVers">
    <legend>Informations de Versements</legend>
       <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
            <p>Cotisations Facturées</p>
            <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
           <p>Ecart Facturation</p>
           <h3>0,00€</h3>
        </div>
 
       <div id="panneau">
          <ul id="onglets" class="clearfix">
             <li tabindex="1">Informations</li>
              <li tabindex="2">Liste Inscrits</li>
              <li id="fact" tabindex="3">Facturations</li>
              <li id="vers" tabindex="4">Versements</a</li>
              <li tabindex="5">Tarifications</li>
            </ul>
            <ul id="contenus">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

CSS

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/* Informations Facturations et Versements */
 
#infosFact, #infosVers {
  display: none;
}
 
#infosFact, #infosVers {
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
 
#panneau {
  margin: 0;
  padding: 0.15%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
 
#panneau #onglets {
  margin: 0;
  padding: 0;
}
 
#panneau #onglets li {
  float: left;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 8px 0 8px;
  margin: 0;
  color: rgba(0, 0, 0, 0.4);
  list-style: none;
  font-size: 0.8em;
  font-weight: bold;
  cursor: default;
}
 
#panneau #onglets li:hover {
  background-color: #2f67ff;
  color: rgb(240, 248, 255, 0.4);
}
 
#panneau #onglets li.actif {
  background: whitesmoke;
  color: black;
}
 
#panneau #contenus {  
  margin:  0 0 0 0;
  padding: 0 0 0 0;
  height: 41vh;
}
 
#panneau #contenus li {
  /*Je défini les propriétés communes à ts les contenus*/
  background: whitesmoke;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  /*et je les masque*/
  display: none;
}
 
#panneau #contenus li.actif {  
  /* j'affiche uniquement le li de class actif */
  display: block;
}
 
  /***** HACKS CSS *******/
 
.clearfix:before, .clearfix:after {
  content: " "; 
  display: table; 
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

JS Onglets

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var onglets = document.getElementById("onglets");
var contenus = document.getElementById("contenus");
 
var liOnglet = onglets.getElementsByTagName("li");
var liContenu = contenus.getElementsByTagName("li");
 
liOnglet[0].className = "actif";
liContenu[0].className = "actif";
 
for (var i = 0; i < liOnglet.length; i++){
	liOnglet[i].num = i;
 
    liOnglet[i].addEventListener("click", function(){
 
		for (var j = 0; j < liOnglet.length; j++){
			liOnglet[j].className="";
			liContenu[j].className="";
		}
 
		liOnglet[this.num].className="actif";
		liContenu[this.num].className="actif";
	});
}

JS Affichage

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
30
31
/* Afficher Informations de Facturations */
 
document.getElementById('fact').addEventListener("focus", afficherFact);
 
function afficherFact() {
  document.getElementById('infosFact').style.display = "flex";
}
 
/* Masquer Informations de Facturations */
 
document.getElementById('fact').addEventListener("blur", masquerFact);
 
function masquerFact() {
  document.getElementById('infosFact').style.display = "none";
}
 
/* Afficher Informations de Versements */
 
document.getElementById('vers').addEventListener("focus", afficherVers);
 
function afficherVers() {
  document.getElementById('infosVers').style.display = "flex";
}
 
/* Masquer Informations de Versements */
 
document.getElementById('vers').addEventListener("blur", masquerVers);
 
function masquerVers() {
  document.getElementById('infosVers').style.display = "none";
}

Merci d'avance pour me mettre sur la voie (je ne demande pas une solution toute faite (sauf si un bon samaritain... :-°))
Vous souhaitant une bonne journée, ou soirée (à prendre en fonction de l'heure de votre lecture) ;).

Michel Diot

Débutant webmaster.

29/10/2022, 14h27
mathieu

quand je teste votre code, j'ai déjà un souci avec les balises fieldset avant même de voir les onglets.
au chargement de la page, je vois juste la partie "Informations de Facturations" mais "Informations de Versements" est caché, je suppose que ce n'est pas ce que vous souhaitez ?

Bonjour Mathieu,

merci d'avoir répondu à ma demande.

Pourtant, en passant mon code dans un Replit, cela fonctionne.

Alors, je reprends un peu mes explications :

Quand la page s'affiche, normalement, je ne doit pas voir mes blocs "Informations de Facturations" et "Informations de Versements".
C'est en cliquant sur l'onglet Facturations que les "Informations de Facturations" doivent apparaître et idem pour les Versements.
J'ai peut-être oublié une partie du code. Oups ! Désolé.

Mais quand je clic en dehors de l'onglet, le bloc qui apparaît, s'efface, alors que je voudrais qu'il reste tant que je n'est pas changer d'onglet.
Je ne sais pas si mes explications sont suffisamment claire.

Je remets mes bouts de code après quelques modifications/améliorations:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class="infos-resp">
    <div class="name-resp">
      <label for="name_resp">Nom Prénom Responsable :*</label>
      <input type="text" name="name_resp" id="name_resp" autofocus>
      <fieldset id="infosFact">
        <legend>Informations de Facturations</legend>
        <div class="totalFact">
          <p>Total Facturation</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalSelect">
          <p>Total Selection</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
 
      <fieldset id="infosVers">
        <legend>Informations de Versements</legend>
        <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
          <p>Cotisations Facturées</p>
          <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
          <p>Ecart Facturation</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
    </div>
    <div id="panneau">
      <ul id="onglets" class="clearfix">
        <li tabindex="1">Informations</li>
        <li tabindex="2">Liste Inscrits</li>
        <li id="fact" tabindex="3">Facturations</li>
        <li id="vers" tabindex="4">Versements</a</li>
        <li tabindex="5">Tarifications</li>
      </ul>
      <ul id="contenus">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <script src="change_onglet.js"></script>
    <script src="afficherMasquer.js"></script>

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
legend {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to bottom, rgb(124, 124, 124), rgba(255, 255, 255, 0)) 0.5 40%;
}
 
.name-resp { 
  height: 200px;
  flex-direction: column;
  padding: 1.5%;
}
 
#name_resp {
  width: 85%;
  padding: 0;
  margin: 1% 0 1% 0;
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  border: 3px ridge lightgray;
}
 
#infosFact, #infosVers {
  display: flex;
}
 
#infosFact, #infosVers {
  display: none;
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
 
#panneau {
  margin: 0;
  padding: 0.15%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5));
}
 
#panneau #onglets {
  margin: 0;
  padding: 0;
}
 
#panneau #onglets li {
  float: left;
  height: 20px;
  line-height: 20px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 0 8px 0 8px;
  margin: 0;
  color: rgba(0, 0, 0, 0.4);
  list-style: none;
  font-size: 0.8em;
  font-weight: bold;
  cursor: default;
}
 
#panneau #onglets li:hover {
  background-color: #2f67ff;
  color: rgb(240, 248, 255, 0.4);
}
 
#panneau #onglets li.actif {
  background: whitesmoke;
  color: black;
}
 
#panneau #contenus {  
  margin:  0 0 0 0;
  padding: 0 0 0 0;
  height: 41vh;
}
 
#panneau #contenus li {
  /*Je défini les propriétés communes à ts les contenus*/
  background: whitesmoke;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;
  /*et je les masque*/
  display: none;
}
 
#panneau #contenus li.actif {  
  /* j'affiche uniquement le li de class actif */
  display: block;
}
 
  /***** HACKS CSS *******/
 
.clearfix:before, .clearfix:after {
  content: " "; 
  display: table; 
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  *zoom: 1;
}

JS change_onglet.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var onglets = document.getElementById("onglets");
var contenus = document.getElementById("contenus");
 
var liOnglet = onglets.getElementsByTagName("li");
var liContenu = contenus.getElementsByTagName("li");
 
liOnglet[0].className = "actif";
liContenu[0].className = "actif";
 
for (var i = 0; i < liOnglet.length; i++){
	liOnglet[i].num = i;
 
    liOnglet[i].addEventListener("click", function(){
 
		for (var j = 0; j < liOnglet.length; j++){
			liOnglet[j].className="";
			liContenu[j].className="";
		}
 
		liOnglet[this.num].className="actif";
		liContenu[this.num].className="actif";
	});
}

JS afficherMasquer.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* Masquer Informations de Facturations */
 
document.getElementById('fact').addEventListener("blur", masquerFact);
 
function masquerFact() {
  document.getElementById('infosFact').style.display = "none";
}
 
/* Afficher Informations de Versements */
 
document.getElementById('vers').addEventListener("focus", afficherVers);
 
function afficherVers() {
  document.getElementById('infosVers').style.display = "flex";
}
 
/* Masquer Informations de Versements */
 
document.getElementById('vers').addEventListener("blur", masquerVers);
 
function masquerVers() {
  document.getElementById('infosVers').style.display = "none";
}

Merci pour votre aide.

Michel

31/10/2022, 10h40
mathieu

dans le code du 1er message, il manquait une balise fermante "fieldset" donc je ne testais pas la bonne structure.
là dans votre 2e message, il manque encore une balise fermante "div" mais je crois que je comprends mieux ce que vous voulez faire.

déjà je vous conseille de ne pas utiliser le code qui est dans "afficherMasquer.js" mais plutot de mettre les contenus des fieldset directement dans les balises "ul#contenus li".

Re bonjour et merci pour votre réponse.

Mes blocs fieldset doivent s'afficher au-dessus des onglets. Dans les balises "ul#contenus li" il y a un tableau récapitulatif des facturations sur l'année. Idem pour Versements.
Donc je ne peux pas mettre mon bloc fieldset dans cet ul.

Je pense que mes explications ne sont pas suffisamment claire. Je m'en excuse...:?

Si vous passez par Replit, vous verrez que tout fonctionne, jusqu'au moment ou l'onglet actif perd le focus.

Ce que je désire faire, c'est garder mon bloc affiché même si l'onglet correspondant perd le focus en cliquant dans le corps de l'onglet.

Merci pour votre aide.

Michel

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="infos-resp">
    <div class="name-resp">
      <label for="name_resp">Nom Prénom Responsable :*</label>
      <input type="text" name="name_resp" id="name_resp" autofocus>
      <fieldset id="infosFact">
        <legend>Informations de Facturations</legend>
        <div class="totalFact">
          <p>Total Facturation</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalSelect">
          <p>Total Selection</p>
          <h3>0,00€</h3>
        </div>
        <div class="totalNoRegle">
          <p>Total "Non Réglé"</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
 
      <fieldset id="infosVers">
        <legend>Informations de Versements</legend>
        <div class="totalSelectVers">
          <p>Total Sélection</p>
          <h3>0,00€</h3>
        </div>
        <div class="CotisFact">
          <p>Cotisations Facturées</p>
          <h3>0,00€</h3>
        </div>
        <div class="ecartFact">
          <p>Ecart Facturation</p>
          <h3>0,00€</h3>
        </div>
      </fieldset>
    </div>
  </div>
  <div id="panneau">
    <ul id="onglets" class="clearfix">
      <li tabindex="1">Informations</li>
      <li tabindex="2">Liste Inscrits</li>
      <li id="fact" tabindex="3">Facturations</li>
      <li id="vers" tabindex="4">Versements</a< /li>
      <li tabindex="5">Tarifications</li>
    </ul>
    <ul id="contenus">
      <li></li>
      <li></li>
      <li>Tableau Récapitulatif</li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <script src="change_onglet.js"></script>
  <script src="afficherMasquer.js"></script>
 
  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
 
</html>

je ne connais pas replit. j'ai fait une recherche qui m’amène au site replit.com mais on me demande de me connecter donc je ne pense pas que ça va m'aider à vous aider.

pour la structure de votre page, si le choix d'un onglet doit afficher des informations au dessus et en dessous des onglets, essayez cette structure :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <div id="panneau">
    <ul id="contenus_audessus">
      <li>un fieldset ici</li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="onglets" class="clearfix">
      <li tabindex="1">Informations</li>
      <li tabindex="2">Liste Inscrits</li>
      <li id="fact" tabindex="3">Facturations</li>
      <li id="vers" tabindex="4">Versements</li>
      <li tabindex="5">Tarifications</li>
    </ul>
    <ul id="contenus_dessous">
      <li></li>
      <li></li>
      <li>Tableau Récapitulatif</li>
      <li></li>
      <li></li>
    </ul>
  </div>

31/10/2022, 12h10
prof2zik60

Effectivement, si vous ne connaissez pas, cela ne va pas l'aider. :question:

Je voulais mettre une vidéo de ce que j'aimerais faire, mais je vois qu'on ne peu mettre que des vidéos déjà en ligne.
Est-ce possible de vous l'envoyer en privé ?

Je vais essayer de mettre en place votre idée et je vous tiens au courant si cela fonctionne.

Merci.

Je ne met pas encore résolu, je verrais cela une fois mon problème réglé.
02/11/2022, 12h40
SpaceFrog

un exemple glané dans un autre post du forum

https://jsbin.com/qomuhufoda/edit?html,output
02/11/2022, 15h42
NoSmoking

Bonjour,
tu peux également regarder :

↪ Affiche/masque one or more
05/11/2022, 11h17
prof2zik60

Bonjour à tous,

merci pour toutes ces réponses. Désolé de répondre un peu tardivement: en plein travaux (pas informatiques).

Je vais étudié de près les idées que vous m'avez donnés.

Je vous tiens au courant pour la suite.

Bonne journée.

Michel

Citation:

Un musicien ne se trompe jamais, il improvise.

Bonjour à toutes & tous.

Tout d'abord, merci à NoSmoking pour le bout de code. Jai réussi à faire ce que je voulais (en partie) en ajoutant les deux classes de mes blocs cachés dans la partie "récup. des éléments concernés".
Au click sur l'onglet "Facturations", j'affiche bien mes deux blocs correspondants. Idem pour l'onglet Versement. Et bien sûr, sans que les blocs "Informations de Facturations" et Informations de Versements" ne disparaissent quand on clic ailleurs. :ccool:

Bien sûr, et cela ne serait pas drôle, il intervient un autre soucis que je cherche à résoudre depuis quelques jours :

Au click sur mes boutons (que j'ai mis en forme pour qu'ils ressembles à des boutons d'onglets), je ne parviens pas à les faire changer de couleur dès qu'ils deviennent "actif".
J'ai bien essayé d'ajouter une classe "actif" à chaque onglet au moment du click, mais je ne parviens à rien. Je ne comprends pas comment faire.

Auriez-vous une idée de comment pratiquer ? (et comme déjà dit dans le premier message : je suis pas bien bon en JS. Du mal à comprendre la logique, mais j'y arriverait un jour. :twisted:) :(

Merci d'avance pour votre aide.

Bonne journée.

Michel

Je remets les codes correspondants :

HTML

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
  <div class="infos">
    <fieldset id="infosFact">
      <legend>Informations de Facturations</legend>
      <div class="totalFact">
        <p>Total Facturation</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalSelect">
        <p>Total Selection</p>
        <h3>0,00€</h3>
      </div>
      <div class="totalNoRegle">
        <p>Total "Non Réglé"</p>
        <h3>0,00€</h3>
      </div>
    </fieldset>
 
    <fieldset id="infosVers">
      <legend>Informations de Versements</legend>
      <div class="totalSelectVers">
        <p>Total Sélection</p>
        <h3>0,00€</h3>
      </div>
      <div class="CotisFact">
        <p>Cotisations Facturées</p>
        <h3>0,00€</h3>
      </div>
      <div class="ecartFact">
        <p>Ecart Facturation</p>
        <h3>0,00€</h3>
      </div>
    </fieldset>
  </div>
  <div id="panneau">
    <ul id="onglets">
      <li data-links="section-1">Informations</li>
      <li data-links="section-2">Liste Inscrits</li>
      <li data-links="section-3, infosFact">Facturations</li>
      <li data-links="section-4, infosVers">Versements</li>
      <li data-links="section-5">Tarifications</li>
    </ul>
    <section id="section-1" class="projet">
      <h2>Section #1</h2>
      <p>Lorem...</p>
    </section>
    <section id="section-2" class="projet">
      <h2>Section #2</h2>
      <p>Maecenas...</p>
    </section>
    <section id="section-3" class="projet">
      <h2>Section #3</h2>
      <p>Donec...</p>
    </section>
    <section id="section-4" class="projet">
      <h2>Section #4</h2>
      <p>Donec...</p>
    </section>
    <section id="section-5" class="projet">
      <h2>Section #5</h2>
      <p>Donec...</p>
    </section>
  </div>
 
  <script src="script.js"></script>
 
</body>
 
</html>

CSS

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.infos {
  height: 70px;
}
 
fieldset, legend {
  background-color: antiquewhite;
}
 
legend {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient( to bottom, rgb(124, 124, 124), rgba(255, 255, 255, 0)) 0.5 40%;
}
 
/* Informations Facturations et Versements */
 
#infosFact, #infosVers {
  display: flex;
}
 
#infosFact, #infosVers {
  border: 2px ridge lightgray;
  width: 80.5%;
  align-items: center;
  margin-top: 0;
}
 
#infosFact, #infosVers,
#infosFact legend, #infosVers legend {
   background-color: lightblue;
}
 
#infosFact p, #infosFact h3,
#infosVers p, #infosVers h3 {
  margin: 0;
  padding: 0;
}
 
#infosFact p, #infosVers p {
  text-align: center;
}
 
#infosFact h3, #infosVers h3 {
  text-align: center;
  margin: 2% 0 0 0;
}
 
.totalFact, .totalSelect, .totalNoRegle,
.totalSelectVers, .CotisFact, .ecartFact {
  width: 40%;
  height: 38px;
}
 
ul {
  display: flex;
}
 
ul li {
  margin: 0;
  list-style: none;
  padding: 2px 5px;
  cursor: pointer;
  border-top: 1px solid black; 
  border-left: 1px solid black;
  border-right: transtarent;
}
 
 
ul li:hover {
  background-color: #2f67ff;
}
 
[data-links=section-5] {
  border-right: 1px solid black;
}
 
section {
  background-color: white;
  margin-top: -17px;
  padding: 10px;
  border: 1px solid black;
}

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
30
31
32
33
// récup. des éléments concernés
const btns = document.querySelectorAll("[data-links]");
const sections = document.querySelectorAll(".projet, .infos #infosFact, .infos #infosVers");
 
// événement sur click des boutons
function handleClick(e) {
  const btn = e.target;   // ou this
 
  // récup des id concernées avec test existant
  const datas = btn.dataset.links;
  const links = datas ? datas.split(",") : [];
 
  // masque toutes les sections class="projet" + les fieldset infosFact et infosVers
  sections.forEach((sec) => {
    sec.style.display = "none";
  });
 
  // on affiche les concernées
  links.forEach((id) => {
    const elem = document.getElementById(id.trim());
    if (elem) {
      elem.style.display = "";
    }
  });
}
 
// affectation événement au click
btns.forEach((btn) => {
  btn.addEventListener("click", handleClick);
});
 
// affiche la première section
btns[0].click();

Citation:

J'ai bien essayé d'ajouter une classe "actif" à chaque onglet au moment du click, mais je ne parviens à rien. Je ne comprends pas comment faire.

Au clic sur un bouton on enlève la classe active de tous les boutons et on l'ajoute au bouton cliqué, c'est un « presque classique ».

La fonction dans ce cas devient :
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 // événement sur click des boutons function handleClick(e) { const btn = e.target; // ou this // récup des id concernées avec test existant const datas = btn.dataset.links; const links = datas ? datas.split(",") : []; // masque toutes les sections class="projet" sections.forEach((sec) => { sec.style.display = "none"; }); // on affiche les concernées links.forEach((id) => { const elem = document.getElementById(id.trim()); if (elem) { elem.style.display = ""; } }); // ajoute/supprime class sur les boutons btns.forEach((elem) => { // version courte // elem.classList[elem == btn ? "add" : "remove"]("btn-actif"); // version lisible elem.classList.remove("btn-actif"); if (elem === btn) { elem.classList.add("btn-actif"); } }); }
il faut bien sûr qu'il existe dans le CSS la règle .btn-actif comme par exemple :
Code:

1 2 3 4 5 .btn-actif { font-style: italic; color: #069; border: 1px solid currentColor; }
J'ai mis le lien à jour en tenant compte de ta demande :

↪ Affiche/masque one or more

17/11/2022, 17h23
prof2zik60

Bonjour tout le monde.

Bon et bien après toutes ces péripéties, je suis enfin parvenu au résultat souhaité.

Un grand merci à "NoSmoking" pour son aide. Sans toi, j'aurais mis des siècles pour y arriver.

Merci à tous d'avoir pris le temps de me lire.

Je vais me coller à une compréhension plus poussée de Javascript.

Mon problème est résolu. (jusqu'au suivant !!! ;)).

Bonne journée à tous.

Michel.
Prof2guitare-classique.