Hello tout le monde !
Petite question :
J’ai sur une page d’accueil un système d’onglets qui présente un outil en fonction de chaque cible adressée. J’ai donc un bouton “restaurateur”, un “retailer” et un “event manager”.
ça me permet de changer le visuel produit juste en dessous (jusque là pas de soucis, j’ai fait des tabs). Mais le client voudrait qu’en fonction du choix fait, certains autres blocs changent plus bas dans la page. Je me suis dit que j’allais explorer une solution Javascript ? Je dois avoir moyen de tester quel bouton est actif et en fonction afficher une certaine variable de composant ?
Merci de votre aide 🙏
Hello @Caroline Teulery,
Je partirais sur un script JS qui ressemble à ça :
document.addEventListener('DOMContentLoaded', function() {
// Sélectionne tous les boutons d'onglets
const tabs = document.querySelectorAll('.w-tab-link'); // Classe par défaut des Tab Links dans Webflow
const blocs = document.querySelectorAll('[data-bloc]'); // Sélectionne tous les éléments avec l'attribut data-bloc
// Par défaut, cache tous les blocs sauf le premier
blocs.forEach(bloc => bloc.style.display = 'none');
document.querySelector('[data-bloc="restaurateur"]').style.display = 'block'; // Correspond à l'onglet actif par défaut
// Écoute les clics sur les onglets
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// Récupère la valeur de l'attribut data-cible du bouton cliqué
const cible = this.getAttribute('data-cible');
// Cache tous les blocs
blocs.forEach(bloc => bloc.style.display = 'none');
// Affiche le bloc correspondant à la cible
document.querySelector(`[data-bloc="${cible}"]`).style.display = 'block';
});
});
});