Jump to content
Search Community

Initiating tabs from two menus

zurakobakhidze test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...