https://www.batteriedeportable.com/js/4tabs.js

1const headers = document.querySelectorAll('.tab-header');
2const contents = document.querySelectorAll('.tab-content');
3const container = document.querySelector('.tabs-container');
4
5// Fonction pour détecter si on est en mobile
6function isMobile() {
7	return window.innerWidth <= 768;
8}
9
10// Fonction pour désactiver tous les onglets
11function deactivateAll() {
12	headers.forEach(header => header.classList.remove('active'));
13	contents.forEach(content => content.classList.remove('active'));
14}
15
16// Gestion du clic sur un onglet
17function handleTabClick(event) {
18	const tabHeader = event.target;
19	const tabContentId = tabHeader.dataset.tab;
20	const targetContent = document.getElementById(tabContentId);
21
22	// En mode mobile, basculer l'affichage entre visible et masqué
23	if (isMobile()) {
24		const isActive = tabHeader.classList.contains('active');
25		deactivateAll();
26
27		if (!isActive) {
28			tabHeader.classList.add('active');
29			targetContent.classList.add('active');
30		}
31	} else {
32		// En desktop, afficher uniquement l'onglet sélectionné
33		deactivateAll();
34		tabHeader.classList.add('active');
35		targetContent.classList.add('active');
36
37		// Ajuster la hauteur du conteneur
38		const contentHeight = targetContent.offsetHeight;
39		container.style.height = `${contentHeight + headers[0].offsetHeight}px`;
40	}
41
42	// Scroller jusqu'à l'onglet cliqué avec décalage
43	// const offset = window.innerWidth <= 1024 ? 100 : 150; // Décalage selon le mode
44	// const targetPosition = tabHeader.getBoundingClientRect().top + window.scrollY - offset;
45
46	// window.scrollTo({ top: targetPosition });
47}
48
49// Activer le premier onglet par défaut au chargement
50function initializeTabs() {
51	deactivateAll();
52	headers[0].classList.add('active');
53	contents[0].classList.add('active');
54
55	// Ajuster la hauteur uniquement en desktop
56	if (!isMobile()) {
57		const contentHeight = contents[0].offsetHeight;
58		container.style.height = `${contentHeight + headers[0].offsetHeight}px`;
59	} else {
60		container.style.height = 'auto'; // Laisser la hauteur automatique en mobile
61	}
62}
63
64
65// Initialiser les onglets au chargement de la page
66if (headers.length !== 0 && contents.length !== 0 && container) {
67	// Appliquer la logique sur tous les onglets
68	headers.forEach(header => {
69		header.addEventListener('click', handleTabClick);
70	});
71	// Réinitialiser les onglets et la hauteur lors du redimensionnement
72	window.addEventListener('resize', initializeTabs);
73	initializeTabs();
74}