Hi @Rodrigo, thanks a lot
I guess my animation works a bit different than the main example. So i have to rebuild it like this that the first child is set to active before using the accordion. And also i try to set it that is used the "height: auto" option and not a fixed px value. This is my code:
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) {
let menu = element.querySelector(".accordion-menu");
let box = element.querySelector(".accordeon-item .accordeon-item__content");
let toggleIcon = element.querySelector(".accordeon-item .accordeon-item__button .button-icon");
gsap.set(box, { height: "auto" });
let animation = gsap
.timeline()
.from(box, {
height: 0,
duration: 0.5,
ease: "power1.inOut",
onComplete: function() {
$(toggleIcon).addClass('icon-switch-on');
$(toggleIcon).removeClass('active');
}
})
.reverse();
return function (clickedMenu) {
if (clickedMenu === menu) {
animation.reversed(!animation.reversed());
$(toggleIcon).removeClass('icon-switch-on');
$(toggleIcon).addClass('active');
} else {
animation.reverse();
$(toggleIcon).removeClass('icon-switch-on');
$(toggleIcon).addClass('active');
}
};
}
Thank youu!
