Skip to main content

Tabs

Description

  • Plusieurs groupes de tabs possibles dans une même page
  • Utilise les data attribute et les ID pour lier le tab avec son contenu permettant que le markup html soit pratiquement indépendant du volet fonctionnel
  • Style et fonctionnalités facilement modifiables pour votre projet (par exemple, pour créer des tabs verticaux ou autre)

Accessibilité

  • Le focus est trapped dans les onglets permettant une navigation avec les flèches gauche / droite du clavier

Demo

Naviguez entre les tabs suivantes afin de tester.

Praesent maximus, mi a faucibus viverra.

In cursus neque et massa semper fermentum. Donec viverra orci laoreet mattis dapibus. Praesent maximus, mi a faucibus viverra, odio arcu tempus ligula, quis porta nulla nunc sed magna. Proin placerat eu lectus finibus euismod. Fusce eget nunc lorem. Duis porttitor in tellus sit amet viverra. Sed quam eros, pulvinar suscipit congue et, vestibulum in dolor. Integer aliquam arcu sit amet volutpat tincidunt. Nulla eros diam, lobortis sed consequat vitae, viverra at ipsum. Proin blandit felis accumsan posuere aliquam.

Aenean ultricies ante ac purus condimentum, in vehicula augue suscipit. Vestibulum molestie mollis nisl, vel finibus mauris tempor nec. Sed fringilla suscipit ante, nec lobortis leo maximus id. Quisque cursus ullamcorper ligula. Suspendisse blandit libero at neque euismod, nec pellentesque ipsum sollicitudin. Morbi iaculis id nunc non pulvinar. Nam in purus venenatis erat lacinia semper. Sed ac mauris convallis arcu malesuada consequat at a magna. Duis non justo commodo mi bibendum molestie id et sapien. Praesent ullamcorper ex id suscipit lobortis. Suspendisse hendrerit nec neque eget condimentum. Nam ut tempor ante. Quisque vel lorem at nibh rhoncus tincidunt ut ut nunc. Quisque mi neque, ornare nec velit sed, varius venenatis ante. Fusce urna felis, fermentum a pharetra eu, facilisis id quam. Vivamus nibh metus, consectetur sed fringilla sed, laoreet vel ante.

In cursus neque et massa semper fermentum. Donec viverra orci laoreet mattis dapibus. Praesent maximus, mi a faucibus viverra, odio arcu tempus ligula, quis porta nulla nunc sed magna. Proin placerat eu lectus finibus euismod. Fusce eget nunc lorem. Duis porttitor in tellus sit amet viverra. Sed quam eros, pulvinar suscipit congue et, vestibulum in dolor. Integer aliquam arcu sit amet volutpat tincidunt. Nulla eros diam, lobortis sed consequat vitae, viverra at ipsum. Proin blandit felis accumsan posuere aliquam.

Documentation

Importez la fonction dans votre projet

import { Tabs } from "./functions/tabs.js"

Créez et initialisez une instance

const tabsInstance = new Tabs(".tabs", {
  // your options here - see below
})

// init your newly created instance
tabsInstance.init()

Note : Assurez-vous que vos ID de tabs et de data-target soient uniques si vous avez plusieurs groupes de tabs dans une même page.

Options

  • Name
    Type
    Default
    Description
  • headingSelector
    CSS selector
    ".tabs__heading"
  • contentSelector
    CSS selector
    ".tabs__content"
  • headingActiveClass
    string
    "tabs__heading--active"
  • contentActiveClass
    string
    "tabs__content--active"

Code

Dossier de base

Dossier complet