[Résolu] Créer des onglets imbriqués dans un panneau avec des onglets

Bonjour,

Tout d'abord, le pen : Tabs.

Donc, à partir d'une base html details/summary je crée une série d'onglets et de panneaux si l'élément parent contient la classe "tabs". Je n'ai pas encore fini l'implémentation des aria, mais c'est fonctionnel en l'état.

Avant d'aller plus loin j'ai voulu vérifier mon code avec des onglets eux-même imbriqués dans un panneau et là... j'ai un conflit avec les onglets parents :
- je n'arrive pas à cliquer sur les onglets imbriqués, sauf via la navigation au clavier,
- un clique sur un élément parent fait disparaître les panneaux des onglets enfants.

Le deuxième point montre bien que les onglets et panneaux "enfants" se comportent en réalité comme des élements "frères", d'ailleurs l'attribution des id et des aria dans le DOM le confirme. C'est sans doute un problème de spécificité d'un sélecteur sur une boucle dans le javascript, mais après plusieurs tentatives de sélections plus fines que le code actuel (avec le sélecteur CSS combinateur d'enfant ou avec l'api DOM de JavaScript) je n'ai pas réussi à régler mon problème.

Un petit regard expert serait le bienvenu...
Modifié par Olivier C (15 Apr 2022 - 12:57)

EDIT : message supprimé. La question posée ici fait maintenant l'objet d'une question à part : Instruction for...of versus méthode forEach. La question posée ci-dessus demeure toujours valable.
Modifié par Olivier C (15 Apr 2022 - 14:13)

Salut Olivier,

Je pense que l'erreur est simple, cela vient du z-index appliqué sur ton .panel. Mon acheminement:
- pq le hover ne réagit pas alors qu'au clavier, il fonctionne ?
? Probablement un problème CSS plus que JS
- inspecter le panel et sélectionner le div parent… c'est sur, c'est CSS.
? Après, j'ai cherché un pointer-events, ou truc du genre

Même constat et reflexion que @Yordi

Avant de tout inspecter, j'ai tester sans aucun style => le js fonctionne parfaitement

Puis j'ai chercher un z-index , et c'est apparement le fautif

le z-index:-1 de & .tab-panel est a repasser a 0 ou à retirer tout simplement et inversement, donner ce z-index : 1 à & button pour cacher cette bordure .

cdt
Modifié par gcyrillus (15 Apr 2022 - 19:57)

Je vous remercie messieurs. Du coup j'ai mis un `z-index: 1` sur les onglets plutôt qu'un `z-index: -1` sur les panneaux et cela règle ce premier point.

Mais le problème de fond est bien lié au javascript puisque les onglets "enfants" font en réalité partie de la même hiérarchie que les éléments parents, alors qu'il faudrait qu'ils soient dissociés.

J'obtiens ceci :

.tabs
  .tab-list
    button#tab-summary-1
    button#tab-summary-5
    button#tab-summary-6
  #tab-panel-1.tab-panel
    .tabs
      .tab-list
        button#tab-summary-2
        button#tab-summary-3
        button#tab-summary-4
      #tab-panel-2
      #tab-panel-3
      #tab-panel-4
  #tab-panel-5
  #tab-panel-6

Mais je voudrais obtenir ceci :

.tabs
  .tab-list
    button#tab-summary-1
    button#tab-summary-2
    button#tab-summary-3
  #tab-panel-1.tab-panel
    .tabs
      .tab-list
        button#tab-summary-4
        button#tab-summary-5
        button#tab-summary-6
      #tab-panel-4
      #tab-panel-5
      #tab-panel-6
  #tab-panel-2
  #tab-panel-3

Je continue à chercher...
Modifié par Olivier C (17 Apr 2022 - 13:24)

Félicitations mon cher gcyrillus, ta solution est correcte. Sujet résolu (haut la main) !

Je ne regrette pas de vous avoir posé la question, je galèrais vraiment pour trouver la solution. Merci beaucoup !