How to tween a nested accordion?

[maths]

I have an accordion, containing sections which contains questions and answers. Im trying to run the same collapse code to toggle current questions answers as when collapsing a section, with no luck. Any ideas? I have cleaned up the code on purpose so that only the sections are working.

 

Thanks!

See the Pen NWEvqqO by frilansmagi (@frilansmagi) on CodePen

[mvaneijgen]

I would create the animation logic for the following  section > button + content, so each group you want to toggle exist of these elements (nested or not) and then create the animation logic for these elements then check if it is a sub or a top level element and do custom logic for that. You could do this by adding a key to this.animations.push({a: anim, key: 'sub' }); I don't have time to fix that right now in your code. 

 

I've changed your CSS, HTML & JS all there are new divs and they all have data-section, data-trigger and data-content and that is what I check for in the JS. (There is something weird with the second button not being able to click, probably something is overlapping, but is not visible, if you click the first button it will become responsive ). Hope it helps and happy tweening! 

 

See the Pen OJajbQB?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[maths]

That is perfect. Understand you don't have the time to implement the logic, i have no problem doing it. Thanks!

[maths]

Hi!

Unfortunately i have not been able to fix that logic. would appreciate if you could have a look.

[mvaneijgen]

This is not really what this forum is for, seen that is is just Javascript and we like to focus this forum to GSAP, but I was up for the challenge.

 

I've given all your sections a data-type with either 'top' or 'sub', this is what I give to each animation object, see line 39. Then in your toggleanimation() I filter out only the animations that are of the current type and toggle them.

 

I have to say if was a fun challenge, but I'm not 100% onboard with the UX of it all, what if I was a visitor of this website and I want to compare options from Section 2 with sub section of sections 1, with this logic I can't do that and seems like an oversight. Do with this info what you want and next time please post a codepen even if you have not got it working, that way we can see your thought process and better help you, just giving out the answer will not really facilitate learning.

 

See the Pen jOQLZrX?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[maths]

Point taken!

I came up with this instead. Thought i over complicated it a bit with what i had on the Codepen.

 

import gsap from 'gsap';

export default class Faq {
  constructor() {
    this.sections = [...document.querySelectorAll('[data-type="top"], [data-type="sub"]')];
    this.duration = 0.3;
    this.ease = 'power1.inOut';

    if(this.sections.length) {
      this.sections.forEach((el) => {
        const trigger = el.querySelector('[data-trigger]');
        const contents = el.querySelector('[data-content]');
        const timeline = gsap.timeline({paused:true});
 
        timeline.to(contents, {
          height: 'auto',
          duration: this.duration,
          ease: 'power1'
        });

        contents.animation = timeline;

        let open = false;
        trigger.addEventListener('click', () => {
          if(open == false) {
            contents.animation.play();
            open = true;
          } else {
            contents.animation.reverse();
            open = false;
          }
        });
      });
    }
  }
}