How to make the first accordion menu item to be open by default?

[samodurow]

Hi, I peeked at the realization of the accordion. Thanks a lot to the author. 

And how to make the first menu item to be open by default? 

When clicking on another item, the first item should close.

Help please.

See the Pen zYpQVxj?editors=0010 by PointC (@PointC) on CodePen

[Rodrigo]

Hi,

 

This should be a question for the author actually:

https://codepen.io/superbenj/details/RwxmOvQ

 

Craig actually forked that one, most likely to answer a question here in the forums.

 

For what I can see from the code this should do the trick though:

let groups = gsap.utils.toArray(".accordion-group");
let menus = gsap.utils.toArray(".accordion-menu");
let menuToggles = groups.map(createAnimation);

menus.forEach((menu) => {
  menu.addEventListener("click", () => toggleMenu(menu));
});

function toggleMenu(clickedMenu) {
  menuToggles.forEach((toggleFn) => toggleFn(clickedMenu));
}

function createAnimation(element) {
  // ...
}

toggleMenu(menus[0]);

Hopefully this helps.

Happy Tweening!

[samodurow]

12 hours ago, Rodrigo said:

Hi,

 

This should be a question for the author actually:

https://codepen.io/superbenj/details/RwxmOvQ

 

Craig actually forked that one, most likely to answer a question here in the forums.

 

For what I can see from the code this should do the trick though:

let groups = gsap.utils.toArray(".accordion-group");
let menus = gsap.utils.toArray(".accordion-menu");
let menuToggles = groups.map(createAnimation);

menus.forEach((menu) => {
  menu.addEventListener("click", () => toggleMenu(menu));
});

function toggleMenu(clickedMenu) {
  menuToggles.forEach((toggleFn) => toggleFn(clickedMenu));
}

function createAnimation(element) {
  // ...
}

toggleMenu(menus[0]);

Hopefully this helps.

Happy Tweening!

Thank you, that's just what I needed. It's so simple... Need to learn gsap better