Initiating tabs from two menus

[zurakobakhidze 0 Likes (Newbie)]

Hi, I have assembled this example for having multiple tabs on a single page. You can navigate through the tabs via the dropdown menu.

 

However, I am trying to have another set of the menu at the top which will act like a twin of the dropdown menu.  Any pointers on how to achieve this? 

See the Pen LYJryPJ by Kobakhidze (@Kobakhidze) on CodePen

[Rodrigo 5,382 Likes (Superhero)]

Hi,

 

IMHO there are better approaches to this, but in your case this is already working and as @mvaneijgen says: "If it works, it works"

 

This seems to work as expected and uses the same approach you already have in place, so it should be easy for you to follow:

let options = document.querySelectorAll(".options");
// Get the buttons in an array
const optionsBtns = gsap.utils.toArray("#map-wrapper div");
let tabs = document.querySelectorAll(".tabs");
let activeTab = 0;
let old = 0;
let animation;

for (let i = 0; i < options.length; i++) {
  options[i].index = i;
  optionsBtns[i].index = i; // add the index to the element
  gsap.set(tabs[i], { autoAlpha: 0, position: "absolute" });
  options[i].addEventListener("click", toogleTabs);
  // Call the same function that is already working
  optionsBtns[i].addEventListener("click", toogleTabs);
}

Hopefully this helps.

Happy Tweening!

[zurakobakhidze 0 Likes (Newbie)]

Thank you so much @Rodrigo! This is exactly what I was looking for!  Here is the codepen for the updated version for reference: 

See the Pen ExeRvYy by Kobakhidze (@Kobakhidze) on CodePen

 

On the other had, you mentioned there are better approaches. Would you mind elaborating? I am certainly not married on my approach and would love to learn more about better techniques. Thanks!