Bonjour les petits chatons ! Dans ce tutoriel on va apprendre à codes un système d'onglets en javascript. Notez qu'il existe de très nombreuses manières de coder des onglets en js et celle que je vais vous montrer n'est que l'une d'entre elles. Il n'y a pas LA bonne méthode, c'est à vous de choisir celle que vous voulez !

La structure HTML

Partons d'abord du commencement : la structure HTML. Comment vont s'organiser vos onglets, comment structurer vos contenus ? On va tenter de faire au plus simple en ayant d'un côté nos onglets et de l'autre nos contenus.



Okay, facile, non ? Maintenant, il serait plus simple, pour styler le tout, de rassembler les onglets et les contenus ensemble pour mieux les organiser.



Voilà. On a d'un côté une div qui contient tous nos onglets et de l'autre une div qui contient tous nos contenus. On pourrait le schématiser ainsi :



Niveau HTML, pour le moment, on est bons. C'est aussi simple que ça. On pourrait éventuellement mettre le tout dans une autre div, ou le laisser comme ça. Vous pouvez remplir vos div de contenu comme bon vous semble ! On va maintenant ajouter un peu de CSS pour embellir le tout.

Le CSS

Faisons étape par étape en commençant par les onglets. On veut qu'ils soient les uns à côté des autres et les styler un peu.

Code:

.onglet-wrapper {
  display: flex;
  height: 20px;
}
.onglet {
  align-items: center;
  background-color: #ccc;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin-right: 5px;
  padding: 0 10px;
}
.onglet:last-child {
  margin-right: 0;
}

Pour le style CSS, faites comme vous le souhaitez. Vous pourriez donner une largeur à la div englobant les onglets (ce que je n'ai pas fait), vous pourriez donner une largeur et une hauteur précise à vos onglets, vous pourriez aussi les placer les uns au-dessus des autres à la verticale... Bref, laissez votre créativité s'exprimer. Notez le cursor: pointer qui permet de montrer que l'élément est cliquable.

Maintenant, on passe au style des blocs de contenu :

Code:

.contenu {
  background-color: #f4f4f4;
  height: 150px;
  padding: 10px;
  width: 250px;
}

Au final, on obtient plus ou moins ça :




Vous remarquez que tous nos blocs de contenus sont présents et visibles, on changera ça avec le javascript.

Le principe des onglets

Le fonctionnement des onglets est simple :

• Les onglets et les blocs de contenu ont chacun deux états : actif et inactif. Quand un bloc de contenu est actif, il est visible. Quand il est inactif, il ne l'est pas.


• Cet état (actif ou inactif) est géré par l'ajout ou la suppression d'une class sur les éléments


• Au clic sur un onglet, on ajoute la class d'état actif à l'onglet ainsi qu'au bloc de contenu concerné. On retire l'état actif des autres éléments.

On va donc ajouter cette gestion des états dans le CSS :

Code:

.onglet.active {
  background-color: #9c9c9c;
}
.contenu {
  display: none;
  ...
}
.contenu.active {
  display: block;
}

Comme vous pouvez le voir, j'ai choisi d'ajouter une class active, qui, quand elle est présente, change l'apparence des onglets et des blocs. J'ai également ajouté une ligne de CSS pour le style des contenus, car de base, le bloc est inactif et donc en display: none.

Dans notre HTML, on va également ajouter cette class pour qu'on ait de base le premier onglet et le premier bloc actif :


On pourrait ne pas toucher au HTML pour cette étape et le faire directement en js. Comme je le disais, il y a de nombreuses manières de faire. De même, j'ai nommé ma class active, mais vous pouvez la nommer comme vous voulez, ça n'a pas d'importance tant que vos class sont les mêmes dans le HTML et le CSS.
Nous avons maintenant notre structure HTML avec notre CSS et un onglet actif :




Maintenant, il va nous falloir, en javascript :

• Identifier les onglets et les blocs de contenu


• Déclencher un événenement au clic sur un onglet : l'ajout et la suppression de class

Identifier onglets et contenus

Comment savoir au clic sur un onglet quel contenu doit s'afficher ? On a, dans notre code, instauré "à la main" une class active sur notre onglet 1 et notre contenu 1, mais s'il fallait l'écrire en javascript, comment indiquer que tel onglet se rapporte à tel contenu ? Rien de magique, il s'agit ici aussi de modifier le code pour ajouter des identifiants à nos éléments.



Je donne à chacun de mes onglets un id et à chacun de mes contenus un data-id. Je vous conseille de suffixer avec un numéro pour mieux identifier vos onglets et contenus. L'id et le data-id doivent être identiques.

Pourquoi ne pas donner un id à mes contenus ? Tout simplement parce qu'un id est unique. On ne doit jamais le répéter dans une même page.