[Nested Accordion]

Hi @Rodrigo ! Amazing, thank you

[Nested Accordion]

Hi @Rodrigo,

thank you! I will take a closer look on this! Very last issue:
How can i open and close the Accordion only on the title? So no click effect when i click on the child elements (Because i have a video in the accordion to click on).

Best,

Marcel

[Nested Accordion]

Hi @Rodrigo,

thank you a lot That code is also way better! Nice work thank you There is one small problem left. I have different accordion groups... and of each group the first child has to be open. How can i do that?

Best,

Marcel

 

[Nested Accordion]

Hi @Rodrigo, so its basically this example: 

See the Pen zYpQVxj by PointC (@PointC) on CodePen

 but i have to make it work responsive and that the first child is already open, so active! I am very new to the timeline functions tbh! 

THANKS

[Nested Accordion]

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!

[Nested Accordion]

Hi there Thanks a lot! Love that Accordion solution a lot. 

But how to update the height of the content box on window resize? 
Best,

Marcel